/* MLS results: native rendering of search results in the site's design
   language. Uses the site tokens from :root (gold, paper, surface, border,
   text, muted, faint, pos, neg, sp*, radii). Prefix: mr- */

#mlsresults[hidden] { display: none; }
#mlsresults { margin-top: var(--sp8, 32px); scroll-margin-top: 96px; }
#mlsresults .btn { font-size: .9rem; }
#mlsresults .btn-sm { padding: .55rem .9rem; font-size: .82rem; }

/* Header row */
.mr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp4, 16px); flex-wrap: wrap; margin-bottom: var(--sp5, 20px); }
.mr-eyebrow { font: 700 .72rem/1 var(--sans, 'Satoshi', system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep, #8C5A1E); margin-bottom: var(--sp2, 8px); }
.mr-title { font-family: var(--serif, 'Gambetta', Georgia, serif); font-weight: 500; letter-spacing: -.01em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.15; margin: 0; text-wrap: balance; color: var(--text, #221E19); }
.mr-sub { color: var(--muted, #6B635A); margin: var(--sp2, 8px) 0 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.mr-tools { display: flex; gap: var(--sp3, 12px); align-items: center; flex-wrap: wrap; }
.mr-tools label { font: 700 .7rem/1 var(--sans, 'Satoshi', sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6B635A); }
.mr-select { appearance: none; -webkit-appearance: none; background: var(--surface, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B635A' stroke-width='1.5'/></svg>") no-repeat right 12px center; border: 1px solid var(--border, #E4DDD1); border-radius: var(--r-sm, 4px); padding: 10px 34px 10px 12px; font: 500 .9rem var(--sans, 'Satoshi', sans-serif); color: var(--text, #221E19) !important; -webkit-text-fill-color: var(--text, #221E19); }
.mr-select option { color: var(--text, #221E19); background: var(--surface, #fff); }
/* The search form's own selects: full-strength text, never the muted tone */
#mlsform select, .rbar select, .rf select { color: var(--text, #221E19) !important; -webkit-text-fill-color: var(--text, #221E19); opacity: 1; }
#mlsform select option, .rf select option { color: var(--text, #221E19); background: var(--surface, #fff); }

/* Loading */
.mr-status { display: flex; align-items: center; gap: var(--sp3, 12px); color: var(--muted, #6B635A); min-height: 28px; }
.mr-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border, #E4DDD1); border-top-color: var(--gold, #B0752A); animation: mr-rot .9s linear infinite; flex: none; }
@keyframes mr-rot { to { transform: rotate(360deg); } }
.mr-caption { font-size: .95rem; transition: opacity .35s; }
.mr-caption.is-swap { opacity: 0; }
.mr-bar { height: 2px; background: var(--border, #E4DDD1); border-radius: 2px; overflow: hidden; margin: var(--sp4, 16px) 0 var(--sp6, 24px); }
.mr-bar i { display: block; height: 100%; width: 0; background: var(--gold, #B0752A); transition: width .6s ease; }
.mr-skel { background: linear-gradient(90deg, var(--surface-2, #F4F0E8) 25%, var(--gold-wash, #F3EADC) 50%, var(--surface-2, #F4F0E8) 75%); background-size: 200% 100%; animation: mr-shim 1.4s infinite; border-radius: var(--r-sm, 4px); }
@keyframes mr-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mr-skel, .mr-spin { animation-duration: 3s; } }

/* Grid + card (matches the curated listing card) */
.mr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp5, 20px); }
.mr-card { background: var(--surface, #fff); border: 1px solid var(--border, #E4DDD1); border-radius: var(--r-md, 8px); overflow: hidden; box-shadow: var(--sh-card, 0 1px 2px rgba(20,18,15,.04)); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.mr-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lift, 0 10px 30px rgba(20,18,15,.08)); }
.mr-photo { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2, #F4F0E8); overflow: hidden; }
.mr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-photo.is-locked img { filter: saturate(.9); }
.mr-ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--faint, #9A9086); font: 500 .8rem var(--sans, 'Satoshi', sans-serif); letter-spacing: .06em; text-transform: uppercase; padding: var(--sp4, 16px); background: var(--gold-wash, #F3EADC); }
.mr-ph b { display: block; font: 500 1.4rem var(--serif, 'Gambetta', serif); letter-spacing: 0; text-transform: none; color: var(--gold-deep, #8C5A1E); margin-bottom: 4px; }
.mr-pill { position: absolute; top: 10px; left: 10px; background: var(--ink, #14120F); color: #fff; font: 700 .64rem/1 var(--sans, 'Satoshi', sans-serif); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.mr-pill.is-pending, .mr-pill.is-uc { background: var(--gold-deep, #8C5A1E); }
.mr-pill.is-new { background: var(--pos, #3F6E33); }
.mr-body { padding: var(--sp4, 16px) var(--sp4, 16px) var(--sp3, 12px); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mr-price { font: 500 1.45rem/1.1 var(--serif, 'Gambetta', serif); letter-spacing: -.01em; color: var(--text, #221E19); font-variant-numeric: tabular-nums; }
.mr-addr { font-weight: 500; color: var(--text, #221E19); }
.mr-addr.is-locked { color: var(--muted, #6B635A); font-weight: 400; }
.mr-meta { color: var(--muted, #6B635A); font-size: .92rem; font-variant-numeric: tabular-nums; }
.mr-meta span + span::before { content: '·'; margin: 0 .45em; color: var(--faint, #9A9086); }
.mr-office { color: var(--faint, #9A9086); font-size: .78rem; margin-top: var(--sp2, 8px); }
.mr-foot { padding: var(--sp3, 12px) var(--sp4, 16px) var(--sp4, 16px); display: flex; gap: var(--sp2, 8px); align-items: center; justify-content: space-between; border-top: 1px solid var(--border, #E4DDD1); }
.mr-foot .btn-sm { white-space: nowrap; }
.mr-idx { font-size: .74rem; color: var(--faint, #9A9086); text-decoration: none; }
.mr-idx:hover { color: var(--gold-deep, #8C5A1E); }

/* Preview tease: the locked card dims its identifiers and invites contact */
.mr-lockline { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-deep, #8C5A1E); font-size: .82rem; font-weight: 500; }
.mr-lockline svg { width: 12px; height: 12px; }

/* Empty + error */
.mr-empty { text-align: center; padding: var(--sp12, 48px) var(--sp4, 16px); border: 1px dashed var(--border, #E4DDD1); border-radius: var(--r-md, 8px); color: var(--muted, #6B635A); }
.mr-empty h3 { font: 500 1.5rem var(--serif, 'Gambetta', serif); color: var(--text, #221E19); margin: 0 0 var(--sp2, 8px); }
.mr-actions { display: flex; gap: var(--sp3, 12px); justify-content: center; flex-wrap: wrap; margin-top: var(--sp5, 20px); }

/* Unlock panel */
.mr-veil { position: fixed; inset: 0; background: rgba(20,18,15,.45); backdrop-filter: blur(2px); z-index: 90; display: grid; place-items: end center; padding: var(--sp4, 16px); }
@media (min-width: 640px) { .mr-veil { place-items: center; } }
.mr-panel { background: var(--surface, #fff); color: var(--text, #221E19); width: min(480px, 100%); border-radius: var(--r-lg, 14px); box-shadow: var(--sh-lift, 0 20px 60px rgba(20,18,15,.25)); padding: var(--sp6, 24px); position: relative; }
.mr-panel h3 { font: 500 1.6rem/1.15 var(--serif, 'Gambetta', serif); margin: 0 0 var(--sp2, 8px); letter-spacing: -.01em; }
.mr-panel p { color: var(--muted, #6B635A); margin: 0 0 var(--sp5, 20px); }
.mr-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted, #6B635A); cursor: pointer; padding: 6px; }
.mr-field { display: grid; gap: 6px; margin-bottom: var(--sp4, 16px); }
.mr-field label { font: 700 .7rem/1 var(--sans, 'Satoshi', sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6B635A); }
.mr-field input { border: 1px solid var(--border, #E4DDD1); border-radius: var(--r-sm, 4px); padding: 12px; font: 400 1rem var(--sans, 'Satoshi', sans-serif); background: var(--paper, #FBF9F5); color: var(--text, #221E19); }
.mr-field input:focus { outline: 2px solid var(--gold, #B0752A); outline-offset: 1px; border-color: transparent; }
.mr-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--muted, #6B635A); margin-bottom: var(--sp5, 20px); }
.mr-consent input { margin-top: 3px; accent-color: var(--gold, #B0752A); }
.mr-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.mr-err { color: var(--neg, #A8321F); font-size: .9rem; margin-top: var(--sp3, 12px); }
.mr-done { text-align: center; padding: var(--sp4, 16px) 0 0; }
.mr-done .mr-check { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-wash, #F3EADC); color: var(--gold-deep, #8C5A1E); display: grid; place-items: center; margin: 0 auto var(--sp4, 16px); font-size: 22px; }

/* Compliance furniture */
.mr-compliance { margin-top: var(--sp8, 32px); padding-top: var(--sp5, 20px); border-top: 1px solid var(--border, #E4DDD1); color: var(--faint, #9A9086); font-size: .76rem; line-height: 1.6; }
.mr-compliance a { color: inherit; }

/* Toast */
.mr-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink, #14120F); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: .9rem; opacity: 0; transition: .3s; z-index: 100; pointer-events: none; }
.mr-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Address or street field added to the search form */
.rf-addr input { appearance: none; width: 100%; padding: .6rem .75rem; font: inherit; font-size: .9375rem; color: var(--text, #221E19); background: var(--surface, #fff); border: 1px solid var(--border, #E4DDD1); border-radius: var(--r-sm, 4px); }
.rf-addr input::placeholder { color: var(--faint, #9A9086); }
.rf-addr input:focus-visible { outline: 2px solid var(--gold, #B0752A); outline-offset: 1px; }