/* ─────────────────────────────────────────────
   File: app/static/css/style.css
   App Version: 2026.04.25 | File Version: 1.7.0
   Last Modified: 2026-04-25
   ───────────────────────────────────────────── */
/* HomeFinder – custom styles */

body {
    background-color: #f8f9fa;
    -webkit-tap-highlight-color: transparent;
}

.card {
    border-radius: 10px;
}

.navbar-brand {
    font-weight: 700;
}

.progress {
    border-radius: 4px;
}

/* Auth card centering */
.card.shadow-sm {
    border: none;
    border-radius: 12px;
}

/* Badge tweaks */
.badge {
    font-weight: 500;
}

/* ── Desktop: stack icon above text in navbar ─────────────── */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 0.72rem;
        padding: 4px 10px;
        line-height: 1.3;
        gap: 1px;
    }
    .navbar-nav .nav-link i.bi {
        font-size: 1.1rem;
        line-height: 1;
    }
    .navbar-nav .nav-link.dropdown-toggle::after {
        margin-left: 2px;
        vertical-align: middle;
    }
}

/* ── Mobile optimizations ─────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Larger touch targets in collapsed nav */
    .navbar-nav .nav-link {
        padding: 10px 16px;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .navbar-nav .nav-link i.bi {
        width: 24px;
        text-align: center;
        margin-right: 8px;
    }

    /* Dropdown items need breathing room */
    .dropdown-item {
        padding: 10px 20px;
    }

    /* Listing cards: full width, stack photo on top (only top-level flex) */
    .listing-card > .d-flex {
        flex-direction: column;
    }
    .listing-card .d-flex > .flex-shrink-0 {
        width: 100% !important;
        min-height: 220px !important;
    }
    .listing-card .d-flex > .flex-shrink-0 img,
    .listing-card .d-flex > .flex-shrink-0 .placeholder-box {
        width: 100% !important;
        height: 220px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .listing-card .d-flex > .flex-shrink-0 .d-flex.align-items-center {
        border-radius: 10px 10px 0 0 !important;
    }
    /* Reveal description preview when card is stacked */
    .listing-card .listing-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Score ring on mobile: slightly smaller */
    .score-ring {
        width: 42px !important;
        height: 42px !important;
        font-size: 0.8rem !important;
    }

    /* Filter bar: wrap on mobile */
    .card-body .row.g-2 {
        gap: 4px;
    }

    /* Modal dialogs: nearly full-width on mobile */
    .modal-dialog {
        margin: 8px;
    }
    .modal-xl {
        max-width: calc(100vw - 16px);
    }

    /* Map: taller on mobile */
    #map {
        height: calc(100vh - 120px) !important;
        min-height: 400px !important;
    }

    /* Detail page stat blocks */
    .stat-block {
        padding: 8px 4px !important;
    }
    .stat-block .val {
        font-size: 1.2rem !important;
    }

    /* Preferences: full-width columns */
    .pref-section .card-body {
        padding: 12px;
    }

    /* Main container: less padding */
    main.container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── Small phones (< 576px) ───────────────────────────────── */
@media (max-width: 575.98px) {
    /* Price display */
    h5.text-primary { font-size: 1.1rem; }

    /* Feature tags: tighter */
    .feature-tag { font-size: 0.62rem !important; padding: 1px 4px !important; }

    /* Source badges + buttons: wrap but keep buttons visible */
    .listing-card .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Welcome page power cards */
    .power-grid {
        grid-template-columns: 1fr !important;
    }

    /* Role pills: vertical stack */
    .role-pills {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Shared component styles ─────────────────────────────── */

/* Score ring — dashboard listing cards */
.score-ring {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
    border: 3px solid #006AFF; /* Zillow blue default */
}
.source-realtor .score-ring { border-color: #f4845f; }  /* Realtor salmon */
.source-both .score-ring    { border-color: #8b5cf6; }  /* Both = purple */

/* Score ring — digest table (smaller) */
.digest-score-ring {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.digest-score-ring.dsr-border-z { border: 2px solid #006AFF; }
.digest-score-ring.dsr-border-r { border: 2px solid #f4845f; }
.digest-score-ring.dsr-border-b { border: 2px solid #8b5cf6; }

/* Score colors — shared across dashboard, digest, favorites */
.score-high, .dsr-high { background: #d1fae5; color: #065f46; }
.score-mid,  .dsr-mid  { background: #dbeafe; color: #1e40af; }
.score-low,  .dsr-low  { background: #fee2e2; color: #991b1b; }

/* ─────────────────────────────────────────────────────────────
   ── DETAIL PAGE WIDGET DESIGN SYSTEM (added 2026-04-25) ──────
   Edit these four blocks to retheme every widget on the listing
   detail page in one place. Used by:
     .hf-chute-card   — Experiment 1 amber CTA card (the chute)
     .hf-chute-btn    — primary action button on the chute
     .hf-chute-icon   — chute icon color
     .hf-action-row   — compressed share/flag/watch icon row
     .hf-data-card    — neutral data-display card (Deal Score, Listing Info)
   Three roles, three intents:
     ACTION — what the user should do (chute). Warm, attention-grabbing.
     DATA   — what the listing is. Neutral, low-noise.
     INFO   — secondary metadata (source, dates). Muted.
   ───────────────────────────────────────────────────────────── */
:root {
    /* ── ACTION — the chute and primary CTAs. Warm amber by default. ── */
    --hf-action-color:        #d97706;  /* icon + accent text */
    --hf-action-bg:           #fff7ed;  /* card background */
    --hf-action-border:       #d97706;  /* card left border */
    --hf-action-btn-bg:       #d97706;  /* primary button */
    --hf-action-btn-bg-hover: #b45309;
    --hf-action-btn-text:     #ffffff;

    /* ── DATA — listing facts, scores, location. Neutral surface. ── */
    --hf-data-bg:     #ffffff;
    --hf-data-border: #e5e7eb;          /* slate-200 */
    --hf-data-text:   #1f2937;          /* slate-800 */

    /* ── INFO — secondary widgets (Listing Info, Watch Area). Muted. ── */
    --hf-info-bg:     #f8fafc;          /* slate-50 */
    --hf-info-border: #e2e8f0;          /* slate-200 */
    --hf-info-icon:   #64748b;          /* slate-500 */
}

/* Chute card — the Experiment 1 "Ask a local agent" CTA. Always uses
   --hf-action-* so retheme is one-place. Intentionally NOT subject to
   --panel-bg (panel color picker), because it must stand out as the
   primary action regardless of user color preference. */
.hf-chute-card {
    background: var(--hf-action-bg) !important;
    border-left: 4px solid var(--hf-action-border) !important;
}
.hf-chute-icon {
    color: var(--hf-action-color);
}
.hf-chute-btn {
    background: var(--hf-action-btn-bg);
    border-color: var(--hf-action-btn-bg);
    color: var(--hf-action-btn-text);
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.hf-chute-btn:hover,
.hf-chute-btn:focus {
    background: var(--hf-action-btn-bg-hover);
    border-color: var(--hf-action-btn-bg-hover);
    color: var(--hf-action-btn-text);
}
.hf-chute-btn:disabled {
    background: var(--hf-action-btn-bg);
    border-color: var(--hf-action-btn-bg);
    color: var(--hf-action-btn-text);
    opacity: 0.6;
}

/* Action row — compressed icon strip for share/flag/watch on detail page.
   Replaces the three-cards layout (Share & Collect / Your Flag / Watch
   This Area) with a single horizontal row that doesn't fight for visual
   weight against the chute or the deal score. */
.hf-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--hf-info-bg);
    border: 1px solid var(--hf-info-border);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.hf-action-row .hf-action-row-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--hf-info-border);
    margin: 0 0.25rem;
}
.hf-action-row .hf-action-row-label {
    font-size: 0.78rem;
    color: var(--hf-info-icon);
    margin-right: 0.25rem;
}

/* Data card — neutral wrapper for Deal Score / Listing Info / Notes.
   Crisp white surface, slate-200 border. Visually quiet so the chute
   stays the loudest thing on the page. */
.hf-data-card {
    background-color: var(--hf-data-bg);
    border: 1px solid var(--hf-data-border) !important;
    color: var(--hf-data-text);
}

/* Info card — secondary widgets (Watch This Area, Message Agent).
   Even quieter than .hf-data-card — slate-50 background. Used when the
   widget is opt-in / not the primary path. */
.hf-info-card {
    background-color: var(--hf-info-bg);
    border: 1px solid var(--hf-info-border) !important;
    color: var(--hf-data-text);
}
.hf-info-card .card-header {
    color: var(--hf-info-icon);
}
.hf-info-card .hf-info-icon {
    color: var(--hf-info-icon);
}

/* ── Panel background palette (user-selected via Settings) ──
   `body[data-panel-bg="<key>"]` sets --panel-bg, which .listing-card and
   detail-page .card consume. Default key "white" preserves current look.
   Keep in sync with the palette in settings.html + preferences_routes.
   Bolder palette (Tailwind-200 range) shipped 2026-04-22. */
:root { --panel-bg: #ffffff; }
body[data-panel-bg="white"]    { --panel-bg: #ffffff; }
body[data-panel-bg="butter"]   { --panel-bg: #fef3c7; }
body[data-panel-bg="amber"]    { --panel-bg: #fde68a; }
body[data-panel-bg="peach"]    { --panel-bg: #fed7aa; }
body[data-panel-bg="rose"]     { --panel-bg: #fbcfe8; }
body[data-panel-bg="lilac"]    { --panel-bg: #e9d5ff; }
body[data-panel-bg="powder"]   { --panel-bg: #bfdbfe; }
body[data-panel-bg="mint"]     { --panel-bg: #bbf7d0; }
body[data-panel-bg="seafoam"]  { --panel-bg: #99f6e4; }

/* Listing card — dashboard + favorites.
   Using .card.listing-card (2-class specificity) to out-rank Bootstrap's
   .card rule + any page-specific .card overrides. background-color (not
   shorthand) so Finish rules below can layer background-image cleanly. */
.listing-card { transition: box-shadow 0.15s, transform 0.15s; cursor: pointer; }
.card.listing-card { background-color: var(--panel-bg); }
.listing-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); }

/* Detail-page cards — scoped via wrapper so prefs/settings/admin pages stay default */
.detail-panel-surface .card { background-color: var(--panel-bg); }

/* ── Panel finish (layered on top of --panel-bg) ──
   Added 2026-04-22. Three options: flat (default, no overlay), sheen
   (subtle top highlight), linen (fine SVG noise grain). Selectors match
   the background-color specificity above (2 classes) so Bootstrap can't
   strip the image layer out. */
body[data-panel-finish="sheen"] .card.listing-card,
body[data-panel-finish="sheen"] .detail-panel-surface .card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%);
}
body[data-panel-finish="linen"] .card.listing-card,
body[data-panel-finish="linen"] .detail-panel-surface .card {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Description preview — hidden on wide viewports; shown when card stacks (< 992px) */
.listing-card .listing-card-desc { display: none; }
.listing-card.great-deal {
    border-left: 5px solid #16a34a;
    box-shadow: 0 2px 8px rgba(22,163,74,0.12);
    /* Green→white gradient removed 2026-04-22: it used !important and
       clobbered --panel-bg. The border-left, the colored shadow, and the
       trophy "Great Deal" badge (shown by .great-deal-badge display rule
       below) signal the great-deal status clearly enough without hiding
       the user's chosen panel color. */
}
.listing-card.great-deal .great-deal-badge { display: inline-block !important; }

/* Pref/setting card — shared gradient card */
.pref-section, .setting-card {
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f4ff, #e8edf5);
    transition: box-shadow 0.2s ease;
}
.setting-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }

/* Feature tags */
.feature-tag { font-size: 0.7rem; padding: 2px 6px; }

/* Source badges */
.source-badge-zillow  { background: #006AFF; color: #fff; }
.source-badge-realtor { background: #D92228; color: #fff; }
.source-badge-sm { font-size: 0.65rem; padding: 1px 6px; border-radius: 3px; }

/* Stat display (listing grid, dashboard stats, admin) */
.stat-val    { font-size: 1.1rem; font-weight: 600; line-height: 1; }
.stat-val-lg { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label  { font-size: 0.65rem; text-transform: uppercase; color: #6b7280; letter-spacing: 0.5px; }

/* ── Thermometer-style range sliders + thumb-tracking value bubble ── */
.slider-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    vertical-align: middle;
    padding-bottom: 20px; /* room for the value bubble below the track */
}
.slider-wrap > input[type="range"].form-range {
    width: 100%;
    vertical-align: middle;
}
input[type="range"].form-range {
    --fill-pct: 0%;
    --fill-from: #8b5cf6;  /* violet-500 */
    --fill-to:   #ef4444;  /* red-500 */
    --track-color: #e5e7eb;  /* slate-200 */
}
/* WebKit — Chrome, Edge, Safari */
input[type="range"].form-range::-webkit-slider-runnable-track {
    height: 0.7rem;
    background:
        linear-gradient(to right,
            var(--fill-from) 0%,
            var(--fill-to) var(--fill-pct),
            var(--track-color) var(--fill-pct),
            var(--track-color) 100%);
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
input[type="range"].form-range::-webkit-slider-thumb {
    margin-top: -0.25rem;
    width: 1.15rem;
    height: 1.15rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow:
        0 0 0 3px rgba(191, 219, 254, 0.55),
        0 1px 2px rgba(15, 23, 42, 0.25);
    border-radius: 50%;
}
/* Firefox */
input[type="range"].form-range::-moz-range-track {
    height: 0.7rem;
    background: var(--track-color);
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
input[type="range"].form-range::-moz-range-progress {
    height: 0.7rem;
    background: linear-gradient(to right, var(--fill-from), var(--fill-to));
    border-radius: 999px 0 0 999px;
}
input[type="range"].form-range::-moz-range-thumb {
    width: 1.15rem;
    height: 1.15rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow:
        0 0 0 3px rgba(191, 219, 254, 0.55),
        0 1px 2px rgba(15, 23, 42, 0.25);
    border-radius: 50%;
}
/* Value readout — plain text under the thumb */
.slider-wrap .slider-val {
    position: absolute;
    top: calc(100% - 18px);
    left: 0;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
}
/* Static "max value" label — sits on top-right of the slider row */
.slider-max-label {
    opacity: 0.55;
    font-weight: 600;
}
/* Slider color variants — set via class on the input */
input[type="range"].form-range.slider-success {
    --fill-from: #4ade80;
    --fill-to: #15803d;
    --track-color: #dcfce7;
}
input[type="range"].form-range.slider-warning {
    --fill-from: #fbbf24;
    --fill-to: #b45309;
    --track-color: #fef3c7;
}

/* ── HF Banner Card — pastel gradient + left-border + tinted icon ──
   Used everywhere via the hf_banner() Jinja macro. Each variant sets
   the 3 CSS variables that drive border color, gradient, and icon. */
.hf-banner {
    --hf-banner-accent: #60a5fa;
    --hf-banner-bg-from: #eff6ff;
    --hf-banner-bg-to: #dbeafe;
    border: 0;
    border-radius: 10px;
    border-left: 4px solid var(--hf-banner-accent) !important;
    background: linear-gradient(135deg, var(--hf-banner-bg-from), var(--hf-banner-bg-to));
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.06);
    margin-bottom: 0.75rem;
}
.hf-banner .card-body { padding-left: 1rem; padding-right: 1rem; padding-bottom: 1.5rem; }
.hf-banner-inline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding: 0.5rem 1rem;
}
.hf-banner-icon {
    color: var(--hf-banner-accent);
    font-size: 1.3rem; flex-shrink: 0;
}
.hf-banner-title { color: var(--hf-banner-accent); font-weight: 600; }
.hf-banner-body { color: #334155; font-size: 0.88rem; }
.hf-banner-dismiss {
    background: transparent; border: 0; padding: 0; line-height: 1;
    color: var(--hf-banner-accent); opacity: 0.6; font-size: 1rem;
    cursor: pointer;
}
.hf-banner-dismiss:hover { opacity: 1; }

.hf-banner-blue   { --hf-banner-accent:#60a5fa; --hf-banner-bg-from:#eff6ff; --hf-banner-bg-to:#dbeafe; }
.hf-banner-green  { --hf-banner-accent:#16a34a; --hf-banner-bg-from:#dcfce7; --hf-banner-bg-to:#bbf7d0; }
.hf-banner-amber  { --hf-banner-accent:#d97706; --hf-banner-bg-from:#fefce8; --hf-banner-bg-to:#fef9c3; }
.hf-banner-purple { --hf-banner-accent:#8b5cf6; --hf-banner-bg-from:#f5f3ff; --hf-banner-bg-to:#ede9fe; }
.hf-banner-indigo { --hf-banner-accent:#6366f1; --hf-banner-bg-from:#eef2ff; --hf-banner-bg-to:#e0e7ff; }
.hf-banner-red    { --hf-banner-accent:#ef4444; --hf-banner-bg-from:#fef2f2; --hf-banner-bg-to:#fee2e2; }
.hf-banner-teal   { --hf-banner-accent:#06b6d4; --hf-banner-bg-from:#cffafe; --hf-banner-bg-to:#a5f3fc; }
.hf-banner-rose   { --hf-banner-accent:#f43f5e; --hf-banner-bg-from:#fff1f2; --hf-banner-bg-to:#ffe4e6; }
.hf-banner-slate  { --hf-banner-accent:#64748b; --hf-banner-bg-from:#f8fafc; --hf-banner-bg-to:#f1f5f9; }

/* Listing card stats row — fixed gap, centered, font size does not respond to
   viewport. Keeps bd / ba / sqft / ac / yr at a consistent width regardless of
   how wide the card is. */
.listing-stats { justify-content: center; gap: 1rem !important; }
.listing-stats > div { white-space: nowrap; }

/* Inline confirm popover (agent dashboard, agent listings, watch) */
.confirm-pop {
    position: absolute; right: 0; top: 100%; z-index: 1050;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 10px 14px;
    white-space: nowrap; margin-top: 4px;
}
.confirm-pop::before {
    content: ''; position: absolute; top: -6px; right: 12px;
    width: 10px; height: 10px; background: #fff;
    border-left: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}
.confirm-pop-fixed {
    position: fixed; z-index: 9999;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); padding: 10px 14px;
    white-space: nowrap;
}

/* Flag icon colors (shared across dashboard, digest, favorites, watch) */
.flag-star   { color: #f59e0b; }
.flag-maybe  { color: #8b5cf6; }
.flag-hidden { color: #94a3b8; }

/* API call type badges (admin diagnostics, admin metrics) */
.call-type-badge {
    font-size: 0.68rem; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.ct-zillow              { background: #dbeafe; color: #1e40af; }
.ct-realtor             { background: #fee2e2; color: #991b1b; }
.ct-anthropic_deal      { background: #ede9fe; color: #5b21b6; }
.ct-anthropic_portfolio { background: #f3e8ff; color: #7e22ce; }
.ct-anthropic_prefs     { background: #fae8ff; color: #86198f; }
.ct-google_places       { background: #dcfce7; color: #166534; }
.ct-google_geocode      { background: #d1fae5; color: #065f46; }

/* Leaflet landmark tooltips (detail + map) */
.lm-tooltip {
    font-size: 0.72rem; font-weight: 700; padding: 2px 6px;
    border: 1px solid #dc2626; background: #fff; color: #1e293b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Feature icon tiles (contact, help) */
.feature-icon {
    font-size: 1.4rem; width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Dual-range slider — CSS-variable-driven component
   --rng-height:  track container height (default 24px)
   --rng-thumb:   thumb diameter (default 16px)
   --rng-border:  thumb border width (default 2px)
   --rng-top:     bar/bg vertical offset (default 9px)
   --rng-bg:      track background color (default #94a3b8)
   Small variant: .cf-range-track (filter bar, 16px thumb)
   Large variant: .range-track    (preferences, 22px thumb)  */
.range-track, .cf-range-track {
    position: relative;
    height: var(--rng-height, 24px);
    --hf-rng-fill-from: #8b5cf6;   /* matches single-slider gauge */
    --hf-rng-fill-to:   #ef4444;
    --hf-rng-track-bg:  #e5e7eb;
}
.range-track    { --rng-height: 36px; --rng-thumb: 20px; --rng-border: 2px; --rng-top: 14px; }
.cf-range-track { --rng-height: 24px; --rng-thumb: 16px; --rng-border: 2px; --rng-top: 9px;  }

/* Variant colors (added by hf_range variant=) */
.range-track.slider-success, .cf-range-track.slider-success {
    --hf-rng-fill-from: #4ade80; --hf-rng-fill-to: #15803d; --hf-rng-track-bg: #dcfce7;
}
.range-track.slider-warning, .cf-range-track.slider-warning {
    --hf-rng-fill-from: #fbbf24; --hf-rng-fill-to: #b45309; --hf-rng-track-bg: #fef3c7;
}

.range-track input[type="range"],
.cf-range-track input[type="range"] {
    position: absolute; width: 100%; pointer-events: none;
    -webkit-appearance: none; appearance: none;
    height: 4px; background: transparent; top: var(--rng-top); z-index: 3;
    margin: 0; padding: 0;
}

.range-track input[type="range"]::-webkit-slider-thumb,
.cf-range-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: var(--rng-thumb); width: var(--rng-thumb);
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow:
        0 0 0 3px rgba(191, 219, 254, 0.55),
        0 1px 3px rgba(15, 23, 42, 0.35);
    pointer-events: all; cursor: pointer;
}
.range-track input[type="range"]::-moz-range-thumb,
.cf-range-track input[type="range"]::-moz-range-thumb {
    height: var(--rng-thumb); width: var(--rng-thumb);
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow:
        0 0 0 3px rgba(191, 219, 254, 0.55),
        0 1px 3px rgba(15, 23, 42, 0.35);
    pointer-events: all; cursor: pointer;
}
/* Firefox: hide the default native track the input draws under the thumb */
.range-track input[type="range"]::-moz-range-track,
.cf-range-track input[type="range"]::-moz-range-track {
    height: 0; background: transparent; border: 0;
}

.range-bar, .cf-range-bar {
    position: absolute; height: 8px;
    background: linear-gradient(to right, var(--hf-rng-fill-from), var(--hf-rng-fill-to));
    top: calc(var(--rng-top) - 1px);
    border-radius: 999px; pointer-events: none;
}
.range-bg, .cf-range-bg {
    position: absolute; height: 8px; width: 100%;
    background: var(--hf-rng-track-bg);
    top: calc(var(--rng-top) - 1px);
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Dual-range wrapper + labels */
.hf-range-wrap { width: 100%; }
.hf-range-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
}

/* (legacy #cfMinYear / #filterMinScore track styles removed — they now
    inherit the shared .form-range gauge styling above.) */

/* Nav link icon colors (left nav — each link has its own pastel) */
.nav-dashboard  { --nav-color: #7dd3fc; }
.nav-dashboard  i { color: #7dd3fc; }
.nav-map        { --nav-color: #86efac; }
.nav-map        i { color: #86efac; }
.nav-digest     { --nav-color: #fcd34d; }
.nav-digest     i { color: #fcd34d; }
.nav-favorites  { --nav-color: #fbbf24; }
.nav-favorites  i { color: #fbbf24; }
.nav-watch      { --nav-color: #c4b5fd; }
.nav-watch      i { color: #c4b5fd; }
.nav-social     { --nav-color: #f0abfc; }
.nav-social     i { color: #f0abfc; }
.nav-tour       { --nav-color: #fdba74; }
.nav-tour       i { color: #fdba74; }
.nav-prefs      { --nav-color: #a5b4fc; }
.nav-prefs      i { color: #a5b4fc; }
.nav-settings   { --nav-color: #93c5fd; }
.nav-settings   i { color: #93c5fd; }
.nav-help       { --nav-color: #d9f99d; }
.nav-help       i { color: #d9f99d; }
.nav-contact    { --nav-color: #c4b5fd; }
.nav-contact    i { color: #c4b5fd; }
.nav-agent-chat { --nav-color: #67e8f9; }
.nav-agent-chat i { color: #67e8f9; }
/* Right nav — all slate */
.navbar-nav:not(.me-auto) .nav-link i { color: #94a3b8; }

/* Utility: text sizes */
.text-micro  { font-size: 0.65rem; }
.text-2xs    { font-size: 0.7rem; }
.text-xs     { font-size: 0.72rem; }

/* Utility: heading icon */
.heading-icon { font-size: 1.3rem; }

/* Utility: pre-line whitespace */
.text-preline { white-space: pre-line; }

/* Utility: subtle text color */
.text-subtle { color: #94a3b8; }

/* ── PWA standalone mode ──────────────────────────────────── */
@media (display-mode: standalone) {
    /* Extra top padding when running as installed app (no browser chrome) */
    body {
        padding-top: env(safe-area-inset-top);
    }
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* ── Safe area insets (notch phones) ──────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    main.container {
        padding-bottom: env(safe-area-inset-bottom);
    }
}