/* ============================================
   RealtorAuctions — sheriff sale listings
   Graphite ink, oxblood accent, IBM Plex. Square-ish edges, hairline rules, no gradients.
   All colours are the variables below; the header is a dark bar in both themes.
   ============================================ */

:root {
    --bg: #f6f6f4;
    --bg-card: #ffffff;
    --bg-card-solid: #ffffff;
    --bg-raised: #ffffff;
    --bg-hover: rgba(27,29,33,0.035);
    --bg-input: #ffffff;
    --border: #dcdcd7;
    --border-light: #ecece8;
    --border-accent: rgba(var(--accent-rgb),0.45);
    --shadow-sm: 0 1px 2px rgba(27,29,33,0.05);
    --shadow-md: 0 6px 18px rgba(27,29,33,0.08);
    --shadow-lg: 0 18px 50px rgba(27,29,33,0.16);
    --shadow-accent: 0 0 0 1px rgba(var(--accent-rgb),0.25);
    --text: #1b1d21;
    --text-secondary: #50545b;
    --text-muted: #868a91;
    --accent-rgb: 123,35,51;
    --accent: #7b2333;
    --accent-light: #9b3245;
    --accent-ink: #ffffff;
    --accent-soft: rgba(var(--accent-rgb),0.06);
    --accent-glow: rgba(var(--accent-rgb),0.14);
    /* the header is a dark bar in both themes */
    --header-bg: #1b1d21;
    --header-text: #ecece9;
    --header-muted: #a2a5ab;
    --header-accent: #e0899a;
    --green: #2f6b3f;
    --green-soft: rgba(47,107,63,0.08);
    --red: #b42318;
    --red-soft: rgba(180,35,24,0.06);
    --blue: #2c5f8a;
    --blue-soft: rgba(44,95,138,0.08);
    --purple: #5b3f8c;
    --purple-soft: rgba(91,63,140,0.07);
    --orange: #9a5a12;
    --orange-soft: rgba(154,90,18,0.08);
    --radius: 4px;
    --radius-sm: 3px;
    --radius-xs: 2px;
    --radius-full: 3px;
    --header-height: 56px;
    --max-width: 1320px;
}

[data-theme="dark"] {
    --bg: #121315;
    --bg-card: #1a1b1e;
    --bg-card-solid: #1a1b1e;
    --bg-raised: #202226;
    --bg-hover: rgba(255,255,255,0.04);
    --bg-input: #1a1b1e;
    --border: #2d2f34;
    --border-light: #24262a;
    --border-accent: rgba(var(--accent-rgb),0.5);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
    --shadow-lg: 0 18px 50px rgba(0,0,0,0.6);
    --shadow-accent: 0 0 0 1px rgba(var(--accent-rgb),0.3);
    --text: #ecece9;
    --text-secondary: #a8abb1;
    --text-muted: #72757c;
    --accent-rgb: 224,137,154;
    --accent: #e0899a;
    --accent-light: #eaa6b3;
    --accent-ink: #1b1d21;
    --accent-soft: rgba(var(--accent-rgb),0.09);
    --accent-glow: rgba(var(--accent-rgb),0.18);
    --header-bg: #0b0c0d;
    --header-text: #ecece9;
    --header-muted: #8e9198;
    --header-accent: #e0899a;
    --green: #7cc28f;
    --green-soft: rgba(124,194,143,0.10);
    --red: #f08b80;
    --red-soft: rgba(240,139,128,0.10);
    --blue: #8fb6db;
    --blue-soft: rgba(143,182,219,0.10);
    --purple: #b9a2e4;
    --purple-soft: rgba(185,162,228,0.10);
    --orange: #e0a868;
    --orange-soft: rgba(224,168,104,0.10);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg); color:var(--text);
    font-size:15px; line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    transition:background .4s, color .3s;
}
body::before { display:none;
    content:''; position:fixed; inset:0; opacity:0.012;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
}

/* ======== HEADER ======== */
.site-header {
    position:sticky; top:0; z-index:100;
    background:var(--header-bg); color:var(--header-text);
    height:var(--header-height);
}
.header-inner {
    max-width:var(--max-width); margin:0 auto;
    padding:0 24px; height:100%;
    display:flex; align-items:center; justify-content:space-between;
}

/* Brand / Logo */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo {
    width:32px; height:32px; border-radius:3px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
}
[data-theme="dark"] .brand-logo { background:#7b2333; }
.brand-logo-text { font:700 14px 'IBM Plex Sans',sans-serif; letter-spacing:-0.3px; color:#fff; line-height:1; }
.brand-text { display:flex; flex-direction:column; }
.brand h1 {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:18px; font-weight:700;
    letter-spacing:-0.2px; color:var(--header-text);
    line-height:1.1;
}
.brand h1 span { color:var(--header-accent); }
.brand-tag {
    font-size:9.5px; color:var(--header-muted);
    text-transform:uppercase; letter-spacing:1.4px;
    font-weight:500; margin-top:2px;
}

.header-nav { display:flex; align-items:center; gap:4px; height:100%; }
.nav-link {
    color:var(--header-muted); text-decoration:none;
    font-size:13px; font-weight:500;
    padding:0 12px; height:100%; display:flex; align-items:center;
    transition:color .15s;
}
.nav-link:hover, .nav-link.on { color:var(--header-text); }
.nav-link.on { box-shadow:inset 0 -2px var(--header-accent); }
.nav-link i { margin-right:6px; font-size:11px; }

.theme-toggle {
    width:32px; height:32px; border-radius:3px; margin-left:6px;
    border:1px solid rgba(255,255,255,0.14); background:transparent;
    color:var(--header-muted);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:13px; transition:all .15s;
}
.theme-toggle:hover { color:var(--header-text); border-color:var(--header-muted); }
.theme-toggle .fa-moon { display:block; }
.theme-toggle .fa-sun { display:none; }
[data-theme="dark"] .theme-toggle .fa-moon { display:none; }
[data-theme="dark"] .theme-toggle .fa-sun { display:block; }

/* ======== HERO ======== */
.hero { max-width:var(--max-width); margin:0 auto; padding:48px 28px 0; text-align:center; }
.hero-title {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:clamp(30px,4.5vw,46px);
    font-weight:800; letter-spacing:-1.2px; line-height:1.15;
    animation:fadeUp .6s ease both;
    margin:0 auto;
}
.hero-title .accent { color:var(--accent); }
.hero-sub {
    font-size:17px; color:var(--text-secondary);
    margin:14px auto 0; max-width:550px;
    animation:fadeUp .6s ease .1s both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.stats-row {
    display:flex; gap:32px; margin-top:36px;
    padding-bottom:32px; border-bottom:1px solid var(--border);
    animation:fadeUp .6s ease .2s both;
    flex-wrap:wrap; justify-content:center;
}
.stat-number { font-family:'IBM Plex Sans',sans-serif; font-size:32px; font-weight:700; color:var(--accent); line-height:1; }
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.2px; margin-top:4px; font-weight:500; }

.data-freshness { max-width:var(--max-width); margin:0 auto; padding:10px 28px 0; font-size:11.5px; color:var(--text-muted); text-align:center; }

/* ======== FILTERS ======== */
.filters-section { max-width:var(--max-width); margin:0 auto; padding:24px 28px 0; animation:fadeUp .6s ease .3s both; }
.filters-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }
.search-filter { position:relative; flex:1; min-width:240px; max-width:440px; }
.search-filter input {
    width:100%; padding:12px 16px 12px 42px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius-full); color:var(--text);
    font-family:'IBM Plex Sans',sans-serif; font-size:14px; outline:none;
    transition:all .25s; box-shadow:var(--shadow-sm);
}
.search-filter input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); background:var(--bg-raised); }
.search-filter input::placeholder { color:var(--text-muted); }
.search-filter i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }

.filter-select {
    padding:12px 36px 12px 16px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius-full); color:var(--text);
    font-family:'IBM Plex Sans',sans-serif; font-size:13px; outline:none;
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238d95a5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
    transition:all .25s; box-shadow:var(--shadow-sm);
}
.filter-select:focus { border-color:var(--accent); }

.sort-btn {
    padding:12px 18px; background:var(--bg-input);
    border:1px solid var(--border); border-radius:var(--radius-full);
    color:var(--text-muted); font-family:'IBM Plex Sans',sans-serif;
    font-size:13px; cursor:pointer; transition:all .25s;
    display:flex; align-items:center; gap:6px; font-weight:500;
    box-shadow:var(--shadow-sm);
}
.sort-btn:hover { color:var(--text); border-color:var(--text-muted); }
.sort-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

.results-count { font-size:13px; color:var(--text-muted); max-width:var(--max-width); margin:0 auto; padding:16px 28px 0; font-weight:500; text-align:center; }

/* ======== LISTINGS GRID ======== */
.listings-grid {
    max-width:var(--max-width); margin:0 auto;
    padding:20px 28px 60px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

/* ======== SALE CARD ======== */
.sale-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    transition:all .3s cubic-bezier(.2,.8,.4,1);
    cursor:pointer; position:relative;
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow-sm);
}
.sale-card:hover { border-color:var(--border-accent); box-shadow:var(--shadow-accent),var(--shadow-md); transform:translateY(-3px); }
.sale-card:hover .sale-card-address { color:var(--accent); }
.sale-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .3s; }
.sale-card:hover::before { opacity:1; }

.sale-card-top { padding:18px 20px 14px; }
.sale-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.badge { font-size:10px; font-weight:600; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.6px; white-space:nowrap; }
.badge-countdown { background:var(--accent-soft); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.12); }
[data-theme="dark"] .badge-countdown { border-color:rgba(var(--accent-rgb),0.15); }
.badge-type-bank { background:var(--red-soft); color:var(--red); }
.badge-type-city,.badge-type-county { background:var(--green-soft); color:var(--green); }
.badge-type-hoa { background:var(--purple-soft); color:var(--purple); }
.badge-type-other { background:var(--bg-hover); color:var(--text-muted); }

.sale-card-address {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:17px; font-weight:700; color:var(--text);
    letter-spacing:-0.3px; transition:color .2s; line-height:1.25;
}
.sale-card-city { font-size:12.5px; color:var(--text-muted); margin-top:3px; font-weight:500; letter-spacing:0.3px; }

.sale-card-details { padding:0 20px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.detail-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
.detail-value {
    font-size:13px; color:var(--text-secondary); font-weight:500; margin-top:1px;
    line-height:1.4; word-break:break-word;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.sale-card-footer {
    padding:10px 20px; border-top:1px solid var(--border);
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.card-link {
    font-size:11.5px; font-weight:500; color:var(--text-muted);
    text-decoration:none; padding:6px 12px;
    border-radius:var(--radius-full); border:1px solid var(--border);
    transition:all .2s;
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.card-link:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.card-link i { font-size:10px; }

/* ======== MODAL ======== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; backdrop-filter:blur(6px); }
[data-theme="dark"] .modal-overlay { background:rgba(0,0,0,0.7); }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-card-solid); border:1px solid var(--border); border-radius:16px; width:100%; max-width:860px; box-shadow:var(--shadow-lg); animation:modalIn .3s cubic-bezier(.2,.8,.4,1); margin-bottom:40px; overflow:hidden; }
@keyframes modalIn { from{opacity:0;transform:translateY(24px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-accent-bar { height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-light),transparent); }
.modal-header { padding:24px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.modal-header h2 { font-family:'IBM Plex Sans',sans-serif; font-size:22px; font-weight:700; line-height:1.25; letter-spacing:-0.3px; }
.modal-subtitle { font-size:13px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modal-subtitle .sep { opacity:0.3; }
.modal-close { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.modal-close:hover { background:var(--red-soft); color:var(--red); border-color:rgba(220,38,38,0.2); }
.modal-body { padding:0 28px 28px; }
.modal-section { margin-bottom:28px; }
.modal-section:last-child { margin-bottom:0; }
.modal-section-title { font-size:10.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.modal-section-title i { color:var(--accent); font-size:12px; }
.modal-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
.modal-field-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
.modal-field-value { font-size:14px; color:var(--text); font-weight:500; margin-top:3px; word-break:break-word; }
.modal-field-value.mono { font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:var(--bg-hover); padding:4px 10px; border-radius:var(--radius-xs); display:inline-block; border:1px solid var(--border); }
.full-width { grid-column:1/-1; }
.modal-links { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.modal-link { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--text-secondary); text-decoration:none; padding:8px 16px; border-radius:var(--radius-full); border:1px solid var(--border); transition:all .25s; }
.modal-link:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.modal-link i { font-size:11px; }
.modal-link.primary { background:var(--accent); color:var(--accent-ink); font-weight:600; border:none; box-shadow:var(--shadow-accent); }
.modal-link.primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(var(--accent-rgb),0.15); }

.enrich-loading { text-align:center; padding:28px; color:var(--text-muted); font-size:13px; }
.enrich-loading i { animation:spin 1s linear infinite; margin-right:6px; }
@keyframes spin { to{transform:rotate(360deg)} }
.ncc-data-card { background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.ncc-data-card h4 { font-size:12px; font-weight:600; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:0.6px; }
.ncc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.ncc-item-label { font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; font-weight:600; }
.ncc-item-value { font-size:13px; color:var(--text); font-weight:500; }

.analysis-box { background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),0.10); border-radius:var(--radius); padding:18px 20px; margin-top:16px; }
[data-theme="dark"] .analysis-box { border-color:rgba(var(--accent-rgb),0.12); }
.analysis-box h4 { font-size:13px; font-weight:600; color:var(--accent); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.analysis-box p { font-size:13px; color:var(--text-secondary); line-height:1.65; }
.analysis-box ul { list-style:none; padding:0; margin:10px 0 0; }
.analysis-box li { font-size:13px; color:var(--text-secondary); padding:4px 0 4px 20px; position:relative; line-height:1.5; }
.analysis-box li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-weight:600; }

.modal-map-container { width:100%; height:220px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-top:12px; }
.mini-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.mini-table th { text-align:left; padding:8px 12px; border-bottom:1px solid var(--border); font-weight:600; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:0.6px; }
.mini-table td { padding:7px 12px; border-bottom:1px solid var(--border-light); color:var(--text-secondary); }
.mini-table tr:last-child td { border-bottom:none; }

/* ======== FOOTER — Centered ======== */
.site-footer { border-top:1px solid var(--border); padding:36px 28px; }
.footer-inner { max-width:700px; margin:0 auto; text-align:center; }
.footer-disclaimer { font-size:12px; color:var(--text-muted); line-height:1.75; }
.footer-disclaimer a { color:var(--accent); text-decoration:none; }
.footer-disclaimer a:hover { text-decoration:underline; }
.footer-credits { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.footer-credits a { color:var(--accent); text-decoration:none; font-weight:600; }

/* ======== SEO ======== */
.seo-content { border-top:1px solid var(--border); padding:48px 28px; }
.seo-inner { max-width:700px; margin:0 auto; text-align:center; }
.seo-content h2 { font-family:'IBM Plex Sans',sans-serif; font-size:24px; margin-bottom:14px; letter-spacing:-0.3px; }
.seo-content h3 { font-size:16px; margin:24px 0 8px; font-weight:600; }
.seo-content p { font-size:14px; color:var(--text-secondary); line-height:1.75; margin-bottom:10px; text-align:left; }
.seo-content a { color:var(--accent); }

/* ======== STATES ======== */
.empty-state { text-align:center; padding:80px 20px; color:var(--text-muted); grid-column:1/-1; }
.empty-state i { font-size:48px; margin-bottom:16px; opacity:0.2; display:block; color:var(--accent); }
.empty-state h3 { font-size:18px; color:var(--text-secondary); margin-bottom:8px; font-family:'IBM Plex Sans',sans-serif; }
.empty-state p { font-size:14px; }
.empty-state a { color:var(--accent); }
.loading-pulse { animation:pulse 1.5s infinite; text-align:center; padding:80px 20px; color:var(--text-muted); }
.loading-pulse i { display:block; margin-bottom:16px; opacity:0.3; color:var(--accent); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.scroll-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; border-radius:50%; background:var(--accent); color:var(--accent-ink); border:none; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:15px; font-weight:700; box-shadow:var(--shadow-accent); transition:all .25s; z-index:50; }
.scroll-top:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 30px rgba(var(--accent-rgb),0.2); }
.scroll-top.visible { display:flex; }

/* ======== RESPONSIVE ======== */
@media(max-width:768px) {
    .header-inner { padding:0 16px; }
    .brand h1 { font-size:20px; }
    .brand-logo { width:38px; height:38px; }
    .brand-logo-text { font-size:13px; }
    .brand-tag { display:none; }
    .hide-mobile { display:none !important; }
    .hero { padding:28px 16px 0; }
    .hero-title { font-size:28px; }
    .hero-sub { font-size:15px; }
    .stats-row { gap:20px; justify-content:center; }
    .stat-number { font-size:26px; }
    .filters-section { padding:20px 16px 0; }
    .filters-bar { justify-content:stretch; }
    .search-filter { min-width:100%; max-width:100%; }
    .listings-grid { padding:16px 12px 40px; grid-template-columns:repeat(2, 1fr); gap:10px; }
    .sale-card-top { padding:14px 14px 10px; }
    .sale-card-address { font-size:14px; }
    .sale-card-city { font-size:11px; }
    .sale-card-details { padding:0 14px 12px; gap:6px; }
    .detail-label { font-size:9px; }
    .detail-value { font-size:12px; }
    .sale-card-footer { padding:8px 14px; gap:5px; }
    .card-link { font-size:10px; padding:4px 8px; gap:3px; }
    .sale-card-details { grid-template-columns:1fr; gap:8px; }
    .modal-overlay { padding:16px 10px; }
    .modal-header { padding:20px 20px 16px; }
    .modal-header h2 { font-size:18px; }
    .modal-body { padding:0 20px 24px; }
    .modal-detail-grid { grid-template-columns:1fr; gap:12px; }
    .results-count { padding:10px 16px 0; }
    .data-freshness { padding:8px 16px 0; }
    .seo-content { padding:32px 16px; }
    .site-footer { padding:24px 16px; }
}
@media(max-width:360px) {
    .hero-title { font-size:24px; }
    .stats-row { gap:14px; }
    .stat-number { font-size:22px; }
    .brand-logo { width:34px; height:34px; border-radius:8px; }
    .brand-logo-text { font-size:12px; }
    .brand h1 { font-size:18px; }
    .listings-grid { grid-template-columns:1fr; }
    .sale-card-top { padding:14px 16px 10px; }
    .sale-card-details { padding:0 16px 14px; }
    .sale-card-footer { padding:8px 16px; }
    .card-link { font-size:11px; padding:5px 10px; }
}

/* ===== v7: county picker, county badge, detail page sections ===== */
.filter-county { font-weight:600; color:var(--text); border-color:var(--accent); }
.badge-county { background:var(--accent-soft); color:var(--accent); }
.insight-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.insight-list li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-secondary); line-height:1.5; }
.insight-list li i { color:var(--accent); margin-top:3px; width:16px; text-align:center; }
.insight-list li.warn i { color:var(--red); }
.amount-row { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.amount-chip { background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 16px; }
.amount-chip .dg-label { margin-bottom:2px; }
.amount-chip .dg-value { color:var(--accent); font-size:20px; font-family:'IBM Plex Sans',sans-serif; font-weight:700; }
.record-note { white-space:pre-line; font-size:13px; line-height:1.6; }
.source-note { font-size:11.5px; color:var(--text-muted); margin-top:12px; }
.info-note { padding:10px 14px; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-xs); font-size:13px; color:var(--text-secondary); margin-top:12px; }
.status-pill { font-size:11px; font-weight:600; padding:2px 10px; border-radius:var(--radius-full); background:var(--bg-hover); }
.status-pill.postponed { background:var(--red-soft); color:var(--red); }

/* ===== v9: app shell — bottom tab bar, sheets, phone layout ===== */
/* Desktop: secondary filters sit inline in the filter bar */
.filter-more { display:contents; }
.filter-toggle, .filter-sheet-head, .filter-done { display:none; }
.sort-group { display:flex; gap:10px; }
.tab-bar, .sheet-backdrop { display:none; }

@media(max-width:768px) {
    :root { --tab-h:60px; }
    body.has-tab-bar { padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom)); }
    /* The tab bar replaces the header links; keep only the theme button up top */
    body.has-tab-bar .header-nav .nav-link { display:none; }
    .site-header { height:56px; }
    .scroll-top { bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); right:16px; }

    .tab-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200; height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:rgba(255,255,255,0.94); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border-top:1px solid var(--border); }
    [data-theme="dark"] .tab-bar { background:rgba(23,26,31,0.94); }
    .tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:0; color:var(--text-muted); font:inherit; font-size:11px; font-weight:500; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .tab i { font-size:18px; }
    .tab.active { color:var(--accent); font-weight:600; }

    /* "More" sheet (app.js) */
    .sheet-backdrop { display:block; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .2s; }
    .sheet-backdrop.open { opacity:1; pointer-events:auto; }
    .sheet { position:absolute; left:0; right:0; bottom:0; background:var(--bg-card-solid); border-radius:18px 18px 0 0; padding:8px 8px calc(16px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .25s ease; box-shadow:var(--shadow-lg); }
    .sheet-backdrop.open .sheet { transform:none; }
    .sheet-handle { width:40px; height:4px; border-radius:2px; background:var(--border); margin:4px auto 10px; }
    .sheet-row { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; background:none; border:0; border-radius:10px; color:var(--text); font:inherit; font-size:15px; text-decoration:none; text-align:left; cursor:pointer; }
    .sheet-row:active { background:var(--bg-hover); }
    .sheet-row > i:first-child { width:20px; color:var(--accent); text-align:center; }
    .sheet-row span:nth-child(2) { flex:1; }
    .sheet-chev { color:var(--text-muted); font-size:12px; }
    .sheet-switch { width:42px; height:24px; border-radius:12px; background:var(--border); position:relative; transition:background .2s; }
    .sheet-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:transform .2s; }
    .sheet-switch.on { background:var(--accent); }
    .sheet-switch.on::after { transform:translateX(18px); }
    .sheet-note { font-size:11.5px; color:var(--text-muted); text-align:center; padding:10px 16px 0; }

    /* Listings: compact hero, stats as a swipeable row, one card per row */
    .hero { padding:18px 16px 0; }
    .hero-title { font-size:24px; }
    .hero-sub { display:none; }
    .stats-row { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:8px; margin-top:14px; padding-bottom:4px; scrollbar-width:none; }
    .stats-row::-webkit-scrollbar { display:none; }
    .stat-item { flex:0 0 auto; background:var(--bg-card-solid); border:1px solid var(--border); border-radius:12px; padding:8px 14px; }
    .stat-number { font-size:20px; }
    .stat-label { font-size:10px; }
    .listings-grid { grid-template-columns:1fr; padding:12px 12px 24px; gap:12px; }
    .sale-card-details { grid-template-columns:1fr 1fr; }
    .card-link { font-size:12px; padding:8px 12px; }
    .seo-content { display:none; }

    /* Filters: county + search + Filters button stay; the rest opens as a bottom sheet */
    /* No entrance animation here: its transform would make the fixed filter sheet position against this
       section instead of the screen */
    .filters-section { position:sticky; top:56px; z-index:90; padding:10px 12px; background:var(--bg); animation:none; }
    .filters-bar { display:grid; grid-template-columns:1fr auto; gap:8px; }
    .filters-bar .filter-county { grid-column:1 / -1; width:100%; }
    .search-filter { min-width:0; }
    .filter-toggle { display:inline-flex; align-items:center; gap:6px; padding:0 14px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--bg-input); color:var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
    .filter-toggle i { color:var(--accent); }
    .filter-badge:empty { display:none; }
    .filter-badge { min-width:18px; height:18px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:11px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
    .filter-more { display:flex; flex-direction:column; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:310; background:var(--bg-card-solid); border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg); transform:translateY(110%); transition:transform .25s ease; }
    .filters-section.open { z-index:300; }
    .filters-section.open::before { content:''; position:fixed; inset:0; z-index:1; background:rgba(0,0,0,0.35); }
    .filters-section.open .filter-more { transform:none; }
    .filter-more .filter-select { width:100%; height:46px; font-size:15px; }
    .filter-sheet-head { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:16px; padding:0 2px 4px; }
    .filter-clear { background:none; border:0; color:var(--accent); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
    .sort-group .sort-btn { flex:1; justify-content:center; height:42px; }
    .filter-done { display:block; height:48px; border:0; border-radius:12px; background:var(--accent); color:var(--accent-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; margin-top:4px; }
    .results-count { padding:4px 16px 0; }
}

/* Property type + last recorded sale on listing cards (county assessment records) */
.sale-card-facts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px; font-size:12px; color:var(--text-secondary); }
.ptype-tag { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-full); background:var(--blue-soft); color:var(--blue); font-weight:600; font-size:11px; }
.ptype-tag i { font-size:10px; }
.last-sale strong { color:var(--text); font-weight:700; }
.last-sale.muted { color:var(--text-muted); }


/* ===== v11: listings table, county bar, columns menu, map (design D) ===== */
.county-bar { max-width:var(--max-width); margin:0 auto; padding:22px 24px 16px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; border-bottom:1px solid var(--border); }
.county-bar { flex-wrap:wrap; } .county-bar > div:first-child { flex:1 1 320px; min-width:260px; } .county-bar p { max-width:620px; }
.county-bar h2 { font:600 23px 'IBM Plex Sans',sans-serif; letter-spacing:-0.3px; }
.county-bar p { font-size:13px; color:var(--text-muted); margin-top:3px; }
.kpis { display:flex; }
.kpis div { padding:0 18px; border-left:1px solid var(--border); }
.kpis b { display:block; font:600 20px 'IBM Plex Mono',monospace; color:var(--text); white-space:nowrap; }
.kpis small { font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.7px; font-weight:600; white-space:nowrap; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:var(--max-width); margin:0 auto; padding:10px 24px 0; font-size:13px; color:var(--text-muted); }
.toolbar-right { display:flex; gap:8px; align-items:center; position:relative; }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.seg button { border:0; background:var(--bg-card); color:var(--text-secondary); font:600 12.5px 'IBM Plex Sans',sans-serif; padding:7px 12px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.seg button + button { border-left:1px solid var(--border); }
.seg button.on { background:var(--text); color:var(--bg); }
.tool-btn { border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font:600 12.5px 'IBM Plex Sans',sans-serif; padding:7px 12px; border-radius:3px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.tool-btn:hover { color:var(--text); border-color:var(--text-muted); }
.cols-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:60; background:var(--bg-raised); border:1px solid var(--border); box-shadow:var(--shadow-md); padding:8px 0; min-width:200px; display:none; }
.cols-menu.open { display:block; }
.cols-menu label { display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:13px; color:var(--text); cursor:pointer; }
.cols-menu label:hover { background:var(--bg-hover); }
.cols-menu input { accent-color:var(--accent); }
.cols-menu .hint { font-size:11.5px; color:var(--text-muted); padding:6px 14px 2px; border-top:1px solid var(--border-light); margin-top:4px; }
.data-note { max-width:var(--max-width); margin:6px auto 0; padding:0 24px; font-size:12.5px; color:var(--text-muted); }

.table-wrap { max-width:var(--max-width); margin:10px auto 40px; padding:0 24px; }
.ltable { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); font-size:13px; }
.ltable th { text-align:left; font:600 10.5px 'IBM Plex Sans',sans-serif; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted); padding:10px 12px; border-bottom:1px solid var(--border); background:var(--bg); white-space:nowrap; position:sticky; top:var(--header-height); z-index:5; user-select:none; }
.ltable th.sortable { cursor:pointer; } .ltable th.sortable:hover { color:var(--text); }
.ltable th .arr { font-size:9px; margin-left:4px; color:var(--accent); }
.ltable td { padding:11px 12px; border-bottom:1px solid var(--border-light); vertical-align:top; color:var(--text); }
.ltable tbody tr { cursor:pointer; }
.ltable tbody tr:hover td { background:var(--accent-soft); }
.ltable .num { text-align:right; font-family:'IBM Plex Mono',monospace; white-space:nowrap; }
.ltable th.num { text-align:right; font-family:'IBM Plex Sans',sans-serif; }
.ltable .addr { font-weight:600; color:var(--text); text-decoration:none; }
.ltable tr:hover .addr { color:var(--accent); }
.ltable .sub { font-size:12px; color:var(--text-muted); margin-top:2px; font-family:'IBM Plex Sans',sans-serif; }
.ltable .when { font-weight:600; white-space:nowrap; }
.ltable .days { font:600 11.5px 'IBM Plex Mono',monospace; color:var(--accent); white-space:nowrap; }
.ltable .days.past { color:var(--text-muted); }
.ltable .dash { color:var(--text-muted); }
.ltable .muted { color:var(--text-muted); }
.ltable .go { color:var(--accent); font-weight:600; font-size:12.5px; white-space:nowrap; }
.pill { display:inline-block; font:600 10.5px 'IBM Plex Sans',sans-serif; padding:2px 7px; border:1px solid currentColor; border-radius:2px; white-space:nowrap; text-transform:uppercase; letter-spacing:.4px; }
.pill.bank { color:var(--accent); } .pill.city, .pill.county { color:var(--blue); } .pill.hoa { color:var(--purple); } .pill.other { color:var(--text-muted); }
.shimmer { display:inline-block; width:64px; height:10px; border-radius:2px; background:linear-gradient(90deg,var(--border-light),var(--border),var(--border-light)); background-size:200% 100%; animation:shimmer 1.4s linear infinite; vertical-align:middle; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

.map-wrap { max-width:var(--max-width); margin:10px auto 40px; padding:0 24px; }
/* own stacking context: Leaflet's panes (z-index 400+) must stay under the sticky header and tab bar */
#listings-map { position:relative; z-index:0; height:calc(100vh - 200px); min-height:460px; border:1px solid var(--border); background:var(--bg-hover); }
.map-note { font-size:12.5px; color:var(--text-muted); margin-top:8px; }
.price-pin { background:var(--text); color:var(--bg); font:600 11px 'IBM Plex Mono',monospace; padding:3px 6px; border-radius:2px; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.3); transform:translate(-50%,-100%); position:absolute; left:0; top:0; }
.price-pin::after { content:''; position:absolute; left:50%; bottom:-4px; margin-left:-4px; border:4px solid transparent; border-top-color:var(--text); border-bottom:0; }
.price-pin.bank { background:var(--accent); color:var(--accent-ink); } .price-pin.bank::after { border-top-color:var(--accent); }
.dot-pin { width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.ra-cluster { border-radius:50%; background:var(--text); color:var(--bg); display:grid; place-items:center; font:600 12px 'IBM Plex Mono',monospace; box-shadow:0 0 0 5px rgba(var(--accent-rgb),0.28); }
.leaflet-popup-content { font-family:'IBM Plex Sans',sans-serif; font-size:13px; margin:12px 14px; }
.leaflet-popup-content b { font-size:14px; }
.leaflet-popup-content a { color:#7b2333; font-weight:600; }

@media(max-width:768px) {
    .county-bar { flex-direction:column; align-items:flex-start; padding:16px 16px 12px; gap:12px; }
    /* stacked: the 320px basis meant for the row layout would become a 320px height */
    .county-bar > div:first-child { flex:none; min-width:0; }
    .county-bar h2 { font-size:20px; }
    .kpis { width:100%; overflow-x:auto; }
    .kpis div:first-child { border-left:0; padding-left:0; }
    .kpis div { padding:0 14px; }
    .kpis b { font-size:17px; }
    .toolbar, .data-note { padding-left:16px; padding-right:16px; }
    .table-wrap, .map-wrap { padding:0 12px; }
    #listings-map { height:calc(100vh - 260px); }
    /* Table rows become compact blocks on phones: address + date on top, then the figures two per row */
    .ltable, .ltable tbody { display:block; border:0; background:transparent; }
    .ltable thead { display:none; }
    .ltable tr { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; background:var(--bg-card); border:1px solid var(--border); margin-bottom:8px; padding:12px 14px; }
    .ltable td { display:block; padding:0; border:0; min-width:0; }
    .ltable td[data-c="property"] { grid-column:1; grid-row:1; }
    .ltable td[data-c="date"] { grid-column:2; grid-row:1; text-align:right; }
    .ltable td[data-c="saletype"], .ltable td[data-c="county"] { grid-column:1 / -1; }
    .ltable td[data-c="plaintiff"], .ltable td[data-c="defendant"] { grid-column:1 / -1; font-size:12px; }
    .ltable td[data-c]::before { content:attr(data-label); display:block; font:600 9.5px 'IBM Plex Sans',sans-serif; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:1px; }
    .ltable td[data-c="property"]::before, .ltable td[data-c="date"]::before, .ltable td[data-c="saletype"]::before { display:none; }
    .ltable td[data-c="amount"] .sub, .ltable td[data-c="lastsold"] .sub { display:inline; margin-left:4px; }
    .ltable td[data-c="go"] { display:none; }
    .ltable tbody tr:hover td { background:transparent; }
    .ltable .num { text-align:left; }
}

/* Data pages load instantly: no entrance animations */
.filters-section, .hero, .hero-title, .hero-sub, .stats-row, .listings-grid, .sale-card { animation:none !important; }

/* Status column, change flags and alert bar */
.st { display:inline-block; font:600 11px 'IBM Plex Sans',sans-serif; padding:2px 7px; border-radius:2px; white-space:nowrap; }
.st-go { color:var(--text-muted); padding-left:0; }
.st-wait { background:var(--orange-soft); color:var(--orange); }
.st-stop { background:var(--red-soft); color:var(--red); }
.st-changed { font:600 11px 'IBM Plex Sans',sans-serif; color:var(--accent); margin-top:4px; white-space:nowrap; }
.ltable tr.stopped td { color:var(--text-muted); }
.ltable tr.stopped .addr { color:var(--text-muted); text-decoration:line-through; text-decoration-color:rgba(127,127,127,.5); }
.status-alert { max-width:calc(var(--max-width) - 48px); margin:10px auto 0; padding:9px 14px; display:flex; gap:10px; align-items:baseline; background:var(--accent-soft); border:1px solid var(--border-accent); font-size:13px; color:var(--text); }
.status-alert i { color:var(--accent); }
.status-alert button { margin-left:6px; border:1px solid var(--border-accent); background:var(--bg-card); color:var(--accent); font:600 12px 'IBM Plex Sans',sans-serif; padding:2px 8px; border-radius:2px; cursor:pointer; }
.status-alert button.on { background:var(--accent); color:var(--accent-ink); }
@media(max-width:768px) {
    .status-alert { margin:8px 12px 0; flex-wrap:wrap; }
    .ltable td[data-c="status"] { grid-column:1 / -1; }
    .ltable td[data-c="status"]::before { display:none; }
}

/* ===== v13: listing cards (design D) ===== */
.cards-grid { max-width:var(--max-width); margin:10px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.cards-more { text-align:center; margin:16px 0 40px; } .cards-more .tool-btn { margin:0 auto; }
.lcard { background:var(--bg-card); border:1px solid var(--border); border-top:3px solid var(--text); display:flex; flex-direction:column; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.lcard:hover { border-color:var(--text-muted); border-top-color:var(--accent); box-shadow:var(--shadow-md); }
.lcard.changed { border-top-color:var(--accent); }
.lcard.stopped { border-top-color:var(--red); }
.lcard.stopped .lc-addr { color:var(--text-muted); text-decoration:line-through; text-decoration-color:rgba(127,127,127,.5); }
.lcard.stopped .lc-figs b { color:var(--text-muted); }
.lc-top { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:12px 16px 0; }
.lc-days { font:600 11.5px 'IBM Plex Mono',monospace; color:var(--accent); margin-right:2px; }
.lc-days.past { color:var(--text-muted); }
.lc-county { font:600 10.5px 'IBM Plex Sans',sans-serif; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-left:auto; }
.lc-addr { display:block; padding:8px 16px 0; font:700 17px/1.3 'IBM Plex Sans',sans-serif; letter-spacing:-.2px; color:var(--text); text-decoration:none; }
.lcard:hover .lc-addr { color:var(--accent); }
.lc-sub { padding:2px 16px 0; font-size:12.5px; color:var(--text-muted); }
.lc-changed { margin:10px 16px 0; padding:6px 10px; background:var(--accent-soft); border-left:2px solid var(--accent); font:500 12px 'IBM Plex Sans',sans-serif; color:var(--text); }
.lc-changed i { color:var(--accent); margin-right:4px; }
.lc-figs { display:grid; grid-template-columns:1fr 1fr; margin:12px 0 0; border-top:1px solid var(--border-light); }
.lc-figs > div { padding:10px 16px; border-bottom:1px solid var(--border-light); min-width:0; }
.lc-figs > div:nth-child(odd) { border-right:1px solid var(--border-light); }
.lc-figs small { display:block; font:600 9.5px 'IBM Plex Sans',sans-serif; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted); margin-bottom:2px; }
.lc-figs b { font:600 15px 'IBM Plex Mono',monospace; color:var(--text); white-space:nowrap; }
.lc-figs > div:last-child:nth-child(odd) { grid-column:1 / -1; border-right:0; }
.lc-figs b.dash { font-family:'IBM Plex Sans',sans-serif; font-weight:500; color:var(--text-muted); font-size:13px; }
.lc-figs em { display:block; font-style:normal; font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.lc-figs .shimmer { margin-top:6px; }
.lc-meta { display:flex; flex-direction:column; gap:2px; padding:10px 16px 0; font-size:12px; color:var(--text-muted); }
.lc-meta b { font:500 12px 'IBM Plex Mono',monospace; color:var(--text-secondary); }
.lc-actions { display:flex; gap:6px; padding:12px 16px 14px; margin-top:auto; }
.lc-link { display:inline-flex; align-items:center; gap:5px; font:600 12px 'IBM Plex Sans',sans-serif; color:var(--text-secondary); text-decoration:none; padding:6px 10px; border:1px solid var(--border); border-radius:2px; }
.lc-link:hover { color:var(--accent); border-color:var(--accent); }
.lc-link.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.lc-link.primary:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.price-pin.stop { background:#8a8d93; } .price-pin.stop::after { border-top-color:#8a8d93; }
.dot-pin.stop { background:#8a8d93; }
@media(max-width:768px) {
    .cards-grid { padding:0 12px; grid-template-columns:1fr; gap:10px; }
    .lc-addr { font-size:16px; }
}
.lc-figs b.txt { font:600 14px 'IBM Plex Sans',sans-serif; white-space:normal; }

/* Amount-owed slider in the filters */
.range-filter { display:flex; flex-direction:column; gap:4px; min-width:220px; padding:4px 10px; border:1px solid var(--border); background:var(--bg-input); border-radius:var(--radius-sm); }
.range-filter label { font-size:12px; color:var(--text-secondary); display:flex; justify-content:space-between; gap:10px; }
.range-filter label b { font:600 12px 'IBM Plex Mono',monospace; color:var(--accent); }
.range-filter input[type=range] { width:100%; accent-color:var(--accent); margin:0; }
.range-filter .chk { justify-content:flex-start; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); cursor:pointer; }
.range-filter .chk input { accent-color:var(--accent); margin:0; }
@media(max-width:768px) { .range-filter { padding:10px 12px; } .range-filter label { font-size:14px; } .range-filter .chk { font-size:13px; } }

@media(max-width:768px) { .filter-more { max-height:85vh; overflow-y:auto; } }

/* Floating Cards/Map switch (bottom centre, above the phone tab bar) */
.view-float { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:150; display:inline-flex; align-items:center; gap:8px;
    background:var(--text); color:var(--bg); border:0; border-radius:999px; padding:11px 18px; font:600 14px 'IBM Plex Sans',sans-serif; cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.28); }
.view-float span { font:600 11.5px 'IBM Plex Mono',monospace; background:rgba(127,127,127,.28); padding:1px 7px; border-radius:999px; }
.view-float:hover { background:var(--accent); color:var(--accent-ink); }
@media(max-width:768px) { .view-float { bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); } }

/* Mini-map teaser above the cards */
.map-teaser { position:relative; max-width:calc(var(--max-width) - 48px); margin:10px auto 0; height:200px; border:1px solid var(--border); cursor:pointer; overflow:hidden; }
#teaser-map { position:absolute; inset:0; z-index:0; background:#e9e9e4; }
.teaser-cta { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px;
    background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff; font:600 14px 'IBM Plex Sans',sans-serif; pointer-events:none; }
.teaser-cta b { background:#fff; color:#1b1d21; padding:6px 12px; border-radius:2px; font-size:13px; white-space:nowrap; }
.map-teaser:hover .teaser-cta b { background:var(--accent); color:var(--accent-ink); }

/* Swipeable mini cards over the bottom of the map */
.map-box { position:relative; }
.map-strip { position:absolute; left:0; right:0; bottom:10px; z-index:1; display:flex; gap:10px; overflow-x:auto; padding:0 12px 4px; scroll-snap-type:x proximity; scroll-padding:0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain; }
.map-strip::-webkit-scrollbar { display:none; }
.map-strip:empty { display:none; }
.ms-count, .ms-empty { flex:0 0 auto; align-self:flex-end; background:var(--text); color:var(--bg); font:600 12px 'IBM Plex Sans',sans-serif; padding:6px 10px; border-radius:2px; }
.ms-empty { white-space:normal; max-width:280px; }
.ms-card { flex:0 0 250px; scroll-snap-align:start; background:var(--bg-card); border:1px solid var(--border); border-top:3px solid var(--text); padding:10px 12px; box-shadow:var(--shadow-md); cursor:pointer; }
.ms-card.on { border-top-color:var(--accent); box-shadow:0 0 0 2px var(--accent), var(--shadow-md); }
.ms-card.stopped { border-top-color:var(--red); }
.ms-card.stopped .ms-addr { text-decoration:line-through; color:var(--text-muted); }
.ms-top { display:flex; gap:6px; align-items:center; }
.ms-date { font:500 11.5px 'IBM Plex Sans',sans-serif; color:var(--text-muted); }
.ms-addr { font:700 14px 'IBM Plex Sans',sans-serif; margin-top:4px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-sub { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-amt { margin-top:6px; } .ms-amt b { font:600 14px 'IBM Plex Mono',monospace; color:var(--text); } .ms-amt em { font-style:normal; font-size:11.5px; color:var(--text-muted); }
.ms-go { display:inline-block; margin-top:6px; font:600 12px 'IBM Plex Sans',sans-serif; color:var(--accent); text-decoration:none; }
@media(max-width:768px) {
    .map-teaser { margin:8px 12px 0; height:170px; }
    .ms-card { flex-basis:78vw; }
    #listings-map { height:calc(100vh - 230px); height:calc(100dvh - var(--tab-h) - 185px); min-height:360px; }
}
#teaser-map .leaflet-tile-pane { filter:grayscale(.85) contrast(.9) brightness(1.05); }
#teaser-map .leaflet-control-attribution { font-size:9px; position:relative; z-index:3; }
.teaser-cta { bottom:0; padding-bottom:14px; }
.ms-count, .ms-empty { scroll-snap-align:start; }
/* Cards button inside the map (the floating pill hides while the map is on screen) */
.map-cards-btn { position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:7px; background:var(--text); color:var(--bg); border:0; border-radius:999px;
    padding:8px 14px; font:600 13px 'IBM Plex Sans',sans-serif; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.25); }
.map-cards-btn:hover { background:var(--accent); color:var(--accent-ink); }
.map-count { position:absolute; top:10px; left:54px; z-index:2; background:var(--text); color:var(--bg); font:600 12px 'IBM Plex Sans',sans-serif; padding:6px 10px; border-radius:2px; pointer-events:none; }
.map-count:empty { display:none; }
.ms-arrow { display:none; position:absolute; bottom:60px; z-index:3; width:38px; height:38px; border-radius:50%; border:0; background:var(--text); color:var(--bg); cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.3); }
.ms-arrow.prev { left:6px; } .ms-arrow.next { right:6px; }
.ms-arrow:hover { background:var(--accent); color:var(--accent-ink); }
@media (hover:hover) and (pointer:fine) { .ms-arrow { display:block; } .ms-arrow[hidden] { display:none; } }