/* ATLAS V6 — Listings page
 *
 * Layers V6 enterprise vocabulary (cream work surface + gold accent + warm
 * borders) ON TOP of the existing v5-listings.css `.ls-*` class system. The V5
 * sheet still loads (deferred) — the JS render in `js/listings.js` continues
 * outputting `.ls-card / .ls-photo / .ls-price / .ls-status-* / .ls-dom-*`,
 * and these selectors win via load order (this sheet loads after v5-listings
 * and after v6-tables in index.html).
 *
 * Single theme — light only (`.claude/rules/atlas-dashboard.md` hard rule #4).
 * No `[data-theme="dark"]` block. v6-lock.css retires the toggle entirely.
 *
 * DATA INTEGRITY (.claude/rules/data-integrity.md): the JS render is the only
 * thing that emits price/address/photo/DOM. This sheet ONLY styles the
 * containers — never hardcodes any listing fact.
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Page wrapper (no-scroll: outer never scrolls, body handles overflow) — */
#view-listings .ls-page,
[data-view="listings"] .ls-page {
  background: transparent;
}

/* ── Header — V6 eyebrow + boardroom-readable h1 + lede ─────────────────── */
#view-listings .ls-head,
[data-view="listings"] .ls-head {
  padding: 0 0 14px;
  border-bottom: 0;
}
#view-listings .ls-eyebrow,
[data-view="listings"] .ls-eyebrow {
  font: 900 11px/1 var(--font-ui, Inter, "Segoe UI", system-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #8a95a3);
  margin-bottom: 6px;
}
#view-listings .ls-title,
[data-view="listings"] .ls-title {
  font: 850 28px/1.1 var(--font-display, "Aptos Display", Inter, system-ui);
  color: #101722;
  letter-spacing: -0.005em;
}
#view-listings .ls-sub,
[data-view="listings"] .ls-sub {
  font-size: 14px;
  color: var(--muted, #647184);
}

/* Count chip — V6 gold pill */
#view-listings .ls-count-chip,
[data-view="listings"] .ls-count-chip {
  background: #fbecd0;
  border-color: #e8c87a;
  color: #7a4a0a;
  font: 800 11.5px var(--font-ui, Inter);
}

/* Add-listing CTA — V6 gold action button */
#view-listings .ls-add-btn,
[data-view="listings"] .ls-add-btn {
  background: linear-gradient(180deg, var(--gold), #c18a25);
  color: #1a1206;
  box-shadow: 0 2px 10px rgba(193, 138, 37, 0.18);
}
#view-listings .ls-add-btn:hover,
[data-view="listings"] .ls-add-btn:hover {
  box-shadow: 0 4px 16px rgba(193, 138, 37, 0.28);
}
#view-listings .ls-add-btn:focus-visible,
[data-view="listings"] .ls-add-btn:focus-visible {
  outline: 2px solid var(--gold, #c18a25);
}

/* ── Stats strip — V6 summary tile pattern ──────────────────────────────── */
#view-listings .ls-stats,
[data-view="listings"] .ls-stats {
  padding: 0 0 12px;
  gap: 12px;
}
#view-listings .ls-stat,
[data-view="listings"] .ls-stat {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid #d7d0c3;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(29, 24, 14, 0.07);
  padding: 14px 16px;
}
#view-listings .ls-stat::before,
[data-view="listings"] .ls-stat::before {
  background: var(--gold, #c18a25);
  opacity: 0.85;
  width: 3px;
}
#view-listings .ls-stat-val,
[data-view="listings"] .ls-stat-val {
  font: 850 26px/1.1 var(--font-display, "Aptos Display", Inter);
  color: var(--gold, #c18a25);
}
#view-listings .ls-stat-lab,
[data-view="listings"] .ls-stat-lab {
  color: #647184;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── Filter bar — V6 chip pattern (mirrors v6-tables toolbar) ───────────── */
#view-listings .ls-filterbar,
[data-view="listings"] .ls-filterbar {
  padding: 4px 0 12px;
  gap: 10px;
}
#view-listings .ls-chip,
[data-view="listings"] .ls-chip {
  background: #fffdf8;
  border-color: #d7d0c3;
  color: #647184;
  font: 750 13px var(--font-ui, Inter);
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
}
#view-listings .ls-chip:hover,
[data-view="listings"] .ls-chip:hover {
  color: #101722;
  border-color: #c18a25;
  background: #fffdf8;
}
#view-listings .ls-chip.is-active,
[data-view="listings"] .ls-chip.is-active {
  background: #fbecd0;
  color: #7a4a0a;
  border-color: #e8c87a;
}
#view-listings .ls-sort,
#view-listings .ls-search,
[data-view="listings"] .ls-sort,
[data-view="listings"] .ls-search {
  background: #f0eee8;
  border: 1px solid #d7d0c3;
  color: #101722;
  font-size: 14px;
}
#view-listings .ls-sort:focus,
#view-listings .ls-search:focus,
[data-view="listings"] .ls-sort:focus,
[data-view="listings"] .ls-search:focus {
  background: #fffdf8;
  border-color: var(--gold, #c18a25);
}
#view-listings .ls-search::placeholder,
[data-view="listings"] .ls-search::placeholder { color: #8a95a3; }

/* ── Body grid ──────────────────────────────────────────────────────────── */
#view-listings .ls-body,
[data-view="listings"] .ls-body { padding: 4px 0 24px; }

/* ── Card — cream surface, V6 shadow + hover lift ───────────────────────── */
#view-listings .ls-card,
[data-view="listings"] .ls-card {
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid #d7d0c3;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(29, 24, 14, 0.06);
}
#view-listings .ls-card:hover,
[data-view="listings"] .ls-card:hover {
  border-color: var(--gold, #c18a25);
  box-shadow: 0 14px 30px rgba(29, 24, 14, 0.14);
}

/* Photo placeholder — cream luxe gradient instead of dark */
#view-listings .ls-photo,
[data-view="listings"] .ls-photo {
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(193, 138, 37, 0.10), transparent 60%),
    linear-gradient(150deg, #f5f1e8 0%, #ebe7de 60%, #d7d0c3 100%);
}
#view-listings .ls-photo-placeholder,
[data-view="listings"] .ls-photo-placeholder { color: rgba(122, 74, 10, 0.55); }

/* Status overlay — V6 semantic palette (light variant) */
#view-listings .ls-status,
[data-view="listings"] .ls-status {
  font: 800 10px var(--font-ui, Inter);
  letter-spacing: 0.07em;
  backdrop-filter: blur(8px);
}
#view-listings .ls-status-active,
[data-view="listings"] .ls-status-active   { background: rgba(23, 98, 58, 0.92); color: #fff; }
#view-listings .ls-status-contract,
[data-view="listings"] .ls-status-contract { background: rgba(193, 138, 37, 0.92); color: #1a1206; }
#view-listings .ls-status-coming-soon,
[data-view="listings"] .ls-status-coming-soon { background: rgba(23, 70, 142, 0.92); color: #fff; }

/* DOM badge — V6 freshness colors */
#view-listings .ls-dom-fresh,
[data-view="listings"] .ls-dom-fresh { background: rgba(23, 98, 58, 0.92); }
#view-listings .ls-dom-warm,
[data-view="listings"] .ls-dom-warm  { background: rgba(193, 138, 37, 0.94); color: #1a1206; }
#view-listings .ls-dom-stale,
[data-view="listings"] .ls-dom-stale { background: rgba(156, 24, 68, 0.94); }

/* Card body — dark ink on cream */
#view-listings .ls-price,
[data-view="listings"] .ls-price {
  color: var(--gold, #c18a25);
  font: 850 24px var(--font-display, "Aptos Display", Inter);
}
#view-listings .ls-price-old,
[data-view="listings"] .ls-price-old { color: #8a95a3; }
#view-listings .ls-reduced-badge,
[data-view="listings"] .ls-reduced-badge { background: rgba(156, 24, 68, 0.92); }
#view-listings .ls-addr,
[data-view="listings"] .ls-addr { color: #101722; }
#view-listings .ls-city,
[data-view="listings"] .ls-city { color: #647184; }
#view-listings .ls-specs,
[data-view="listings"] .ls-specs {
  color: #101722;
  border-top-color: #ebe7de;
}
#view-listings .ls-specs .ls-dot,
[data-view="listings"] .ls-specs .ls-dot { color: #8a95a3; }
#view-listings .ls-meta,
[data-view="listings"] .ls-meta { color: #647184; }
#view-listings .ls-meta b,
[data-view="listings"] .ls-meta b { color: #101722; font-weight: 700; }

/* Quick actions — V6 action button pattern */
#view-listings .ls-act,
[data-view="listings"] .ls-act {
  background: #fffdf8;
  border: 1px solid #d7d0c3;
  color: #101722;
  font: 750 12px var(--font-ui, Inter);
}
#view-listings .ls-act:hover,
[data-view="listings"] .ls-act:hover {
  background: #fff;
  border-color: var(--gold, #c18a25);
  color: #7a4a0a;
}
#view-listings .ls-act:focus-visible,
[data-view="listings"] .ls-act:focus-visible {
  outline: 2px solid var(--gold, #c18a25);
}
#view-listings .ls-act-cma,
[data-view="listings"] .ls-act-cma {
  background: linear-gradient(180deg, var(--gold), #c18a25);
  color: #1a1206;
  border-color: transparent;
}
#view-listings .ls-act-cma:hover,
[data-view="listings"] .ls-act-cma:hover {
  filter: brightness(1.05);
  color: #1a1206;
}

/* Empty / loading / mock-note states */
#view-listings .ls-empty,
#view-listings .ls-loading,
[data-view="listings"] .ls-empty,
[data-view="listings"] .ls-loading {
  background: rgba(255, 253, 248, 0.6);
  border: 1px dashed #d7d0c3;
  color: #647184;
}
#view-listings .ls-mock-note,
[data-view="listings"] .ls-mock-note {
  background: #fbecd0;
  border-color: #e8c87a;
  color: #7a4a0a;
}
#view-listings .ls-mock-note b,
[data-view="listings"] .ls-mock-note b { color: var(--gold, #c18a25); }