/*
 * Search V2 (SRD-2026-LISTING-005) styles — "Variant C: Split View".
 *
 * Layout (desktop): a 30/70 split — a compact card LIST on the left and a dominant MAP on the right
 * (the default "list" view). A segmented control switches between:
 *   list  — split (cards + map)            [default]
 *   grid  — full-width multi-column cards, no map
 *   map   — map fills the viewport, no list
 *
 * Reimplemented from the Claude Design "Listing search V2" handoff (Variant C - Split View) as
 * Razor + vanilla JS + token-disciplined CSS. Uses the HLRBO design tokens with hex fallbacks so it
 * is correct whether or not the layout defines the :root custom properties.
 *
 * NOTE: V2 uses the standard (dark-green, pinned) site header. Its responsive height is published into
 * --sv2-topbar-h at runtime by the header-measure script in SearchV2.cshtml; the filter strip is
 * --sv2-strip-h (56px). The map pane sticks below them at calc(--sv2-topbar-h + --sv2-strip-h) — every
 * rule uses the vars, so there is no hard-coded literal to keep in sync.
 */

#search-v2-root {
    --sv2-primary-dark: var(--hlrbo-primary-dark, #31420E);
    --sv2-primary: var(--hlrbo-primary, #6E883F);
    --sv2-green-active: #4D6029;
    --sv2-green-hover: var(--hlrbo-green-hover, #5A7033);
    --sv2-accent: var(--hlrbo-accent, #DC7001);
    --sv2-badge: #C8962E;              /* search-result badges (Premium / Trail Cams / etc.) */
    --sv2-featured: #B35A00;           /* PAID boost: Featured badge + pin - the accent deepened to 4.8:1 under white text (#DC7001 is 3.3:1) */
    --sv2-featured-bg: #FDF3E7;        /* Featured carousel ground - a light tint of the accent */
    --sv2-featured-line: #F2D2AE;      /* Featured carousel border */
    --sv2-landkey: #5A7033;            /* LandKey MAP PIN - the LandKey green (landkey2026.css), not the promo gold */
    --sv2-landkey-bg: #F3E9CE;         /* LandKey badge ground - the cream the LandKey mark itself sits on */
    --sv2-landkey-ink: #31420E;        /* LandKey badge ink + mark - 9.1:1 on the cream */
    --sv2-text: var(--hlrbo-text, #1A1A1A);
    --sv2-text-secondary: var(--hlrbo-text-secondary, #666666);
    --sv2-text-tertiary: #999999;
    --sv2-border: var(--hlrbo-border, #E0E0E0);
    --sv2-bg: var(--hlrbo-bg, #F8F9FA);
    --sv2-bg-warm: #FAF8F4;            /* off-white filter strip / map placeholder */
    --sv2-map-bg: #E8E4DA;             /* map pane backdrop while Mapbox boots */
    /* Warm neutral ramp — named once here instead of scattering raw hexes through the rules. */
    --sv2-surface-muted: #F1F3EC;      /* close button / muted surfaces */
    --sv2-surface-muted-hover: #E6E9DF;
    --sv2-placeholder-bg: #E8EAE4;     /* image-placeholder fill (hero / similar thumb) */
    --sv2-placeholder-fg: #B6BBAD;     /* "HLRBO" glyph + muted/disabled text over a placeholder */
    --sv2-disabled-fg: #C2C6BA;        /* disabled control text */
    --sv2-divider: #F0F0EE;            /* hairline dividers inside popovers */
    --sv2-card-radius: 12px;
    --sv2-topbar-h: 82px;              /* standard site header (navbar) height; refined at runtime by the header-measure script in SearchV2.cshtml */
    --sv2-strip-h: 56px;
    --sv2-topbar-h-mobile: 96px;       /* two-row topbar height on phones (logo+burger row + search row) */
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--sv2-text);
    background: var(--sv2-bg);
    display: block;
}

#search-v2-status { font-size: 13.5px; color: var(--sv2-text-secondary); margin-bottom: 12px; }

/* ---- Focus visibility (WCAG 2.4.7) — a visible ring on every keyboard-focusable control. hover/active
   states existed but :focus did not. Green ring on light surfaces; an accent ring on the dark topbar.
   Selectors are unscoped because the drawer / add-filter / layers popovers are appended to <body>
   (outside #search-v2-root), so the var() fallbacks resolve there too. ---- */
.hlrbo-sv2-heart:focus-visible,
.hlrbo-sv2-chip:focus-visible,
.hlrbo-sv2-chip-x:focus-visible,
.hlrbo-sv2-sort:focus-visible,
.hlrbo-sv2-viewseg-btn:focus-visible,
.hlrbo-sv2-infinite-more:focus-visible,
.hlrbo-sv2-empty-clear:focus-visible,
.hlrbo-sv2-empty-maplink:focus-visible,
.hlrbo-sv2-empty-browse:focus-visible,
.hlrbo-sv2-lp-btn:focus-visible,
.hlrbo-sv2-fp-apply:focus-visible,
.hlrbo-sv2-fp-clear:focus-visible,
.hlrbo-sv2-fp-close:focus-visible,
.hlrbo-sv2-fp-num:focus-visible,
.hlrbo-sv2-fp-select:focus-visible,
.hlrbo-sv2-fp-search:focus-visible,
.hlrbo-sv2-lp-close:focus-visible,
.hlrbo-sv2-lp-secbtn:focus-visible,
.hlrbo-sv2-dw-close:focus-visible,
.hlrbo-sv2-dw-share:focus-visible,
.hlrbo-sv2-dw-view:focus-visible {
    outline: 2px solid var(--sv2-primary, #6E883F);
    outline-offset: 2px;
}

/* ---- PropertyCard (S-3, L4-27) — Variant C card ---- */
.hlrbo-sv2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--sv2-border);
    border-radius: var(--sv2-card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hlrbo-sv2-card:hover,
.hlrbo-sv2-card:focus-within {
    border-color: var(--sv2-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
/* Selected (the card whose detail drawer is open) — orange ring, matches the map pin selection. */
.hlrbo-sv2-card.is-selected {
    border-color: var(--sv2-accent);
    border-width: 2px;
    box-shadow: 0 8px 28px rgba(220, 112, 1, 0.18);
}

/* Media: fixed-ratio box (16:10 in grid), image lazy-loaded over a dark placeholder */
.hlrbo-sv2-card-media {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%; /* 16:10 */
    background: var(--sv2-primary-dark);
}

.hlrbo-sv2-media-link {
    position: absolute;
    inset: 0;
    display: block;
}

.hlrbo-sv2-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hlrbo-sv2-card-media--empty::after {
    content: "HLRBO";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Image + body are separate links to the detail page; the heart button is a sibling, never nested
   inside a link (avoids invalid/ambiguous interactive nesting). */
.hlrbo-sv2-body-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1 1 auto; }
.hlrbo-sv2-body-link:hover { color: inherit; text-decoration: none; }

/* Save heart — top-right white circle; saved = accent orange (matches design) */
.hlrbo-sv2-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: var(--sv2-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hlrbo-sv2-heart:hover { color: var(--sv2-primary); }
.hlrbo-sv2-heart[aria-pressed="true"] { color: var(--sv2-accent); }

/* Photo-count dots (decorative) — bottom-center of the card media; signals multiple photos exist. */
.hlrbo-sv2-card-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; gap: 4px; }
.hlrbo-sv2-card-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.hlrbo-sv2-card-dot.is-active { background: #fff; }

/* Top-left badges (featured / availability) */
.hlrbo-sv2-flags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hlrbo-sv2-flag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    padding: 4px 10px;
    border-radius: 14px;
    color: #fff;
    background: var(--sv2-badge, #C8962E);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
/* PROMOTIONAL badges share the one badge color (--sv2-badge): these all say
   "this listing is worth your attention" and belong together. */
.hlrbo-sv2-flag--premium,
.hlrbo-sv2-flag--trailcam,
.hlrbo-sv2-flag--pricechange.is-drop,
.hlrbo-sv2-flag--pricechange.is-rise,
.hlrbo-sv2-flag--soon { background: var(--sv2-badge, #C8962E); color: #fff; }

/* Featured = a PAID Listing Boost. Its own deep-accent fill so it can't be mistaken for the gold
   promo cluster (Premium shared the gold before, so the two were indistinguishable), and white on
   --sv2-featured passes AA (4.8:1) where the shared gold does not. */
.hlrbo-sv2-flag--featured { background: var(--sv2-featured, #B35A00); color: #fff; }
/* The star is decoration: the "/ ''" alt text keeps screen readers to the word "Featured". */
.hlrbo-sv2-flag--featured::before { content: "\2605"; content: "\2605" / ""; margin-right: 4px; }

/* LandKey is the card's PRIMARY quality signal — "this one you can actually book" — so it is the one
   badge built to be read first, and it renders first in the flag row.
   
   It is INVERTED against every sibling on purpose. The others are saturated fills; this is a light
   cream ground with dark-green ink, which is what makes it separate in two directions at once:
   from the gold promo cluster beside it, and from the photo underneath. The first LandKey badge was
   a mid-green pill (#5A7033) and it camouflaged — these are photographs of green timber and fields,
   so a mid-green fill is the one value guaranteed to disappear into them.
   
   The palette is not a new invention: #F3E9CE on #31420E is the LandKey mark's OWN ground and ink
   (HLRBOWeb/img/landKey_flat.svg), so the badge reads as the same program a landowner met on the
   marketing pages. 9.1:1 — far past AA, where the shared gold sits at 2.7:1 and fails it.
   
   Slightly larger and heavier than its siblings, and it carries the mark itself. The ring and the
   deeper shadow keep it legible on a blown-out sky, where a plain cream pill would wash out. */
.hlrbo-sv2-flag--landkey {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: var(--sv2-landkey-bg, #F3E9CE);
    color: var(--sv2-landkey-ink, #31420E);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(49, 66, 14, 0.22);
}
/* The mark: dark shape takes the badge's own ink, cutouts take its ground, so the keyhole stays
   negative space and the two can never drift apart. */
.hlrbo-sv2-lk-mark { width: 14px; height: 14px; display: block; flex: none; }
.hlrbo-sv2-lk-mark .lk-body { fill: currentColor; }
.hlrbo-sv2-lk-mark .lk-cut { fill: var(--sv2-landkey-bg, #F3E9CE); }

/* #10037: "Leased" is an AVAILABILITY state, not a promotion — sharing the
   gold promo color made an unavailable listing read as a highlighted one.
   Muted slate + no lift reads as unavailable at a glance while staying
   legible on the photo (WCAG AA: #fff on #5A6152 ≈ 5.6:1). */
.hlrbo-sv2-flag--leased {
    background: var(--sv2-unavailable, #5A6152);
    color: #fff;
    box-shadow: none;
}

/* Body */
.hlrbo-sv2-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.hlrbo-sv2-card-title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; color: var(--sv2-text); }
.hlrbo-sv2-card-location { font-size: 13px; color: var(--sv2-text-secondary); }

/* Head row: title (left) + Land IQ badge (right). */
.hlrbo-sv2-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hlrbo-sv2-card-head .hlrbo-sv2-card-title { flex: 1 1 auto; }
.hlrbo-sv2-iq {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    background: rgba(110, 136, 63, 0.14);
    color: var(--sv2-primary-dark, #31420E);
    white-space: nowrap;
}
.hlrbo-sv2-card-meta { font-size: 11px; color: var(--sv2-text-secondary); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin-top: 2px; }
.hlrbo-sv2-card-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.hlrbo-sv2-card-stats span + span::before { content: "·"; margin-right: 8px; }

.hlrbo-sv2-species { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.hlrbo-sv2-species-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(110, 136, 63, 0.14);
    border: none;
    color: var(--sv2-primary-dark);
}

.hlrbo-sv2-card-footer {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.hlrbo-sv2-price { font-size: 19px; letter-spacing: -0.01em; }
.hlrbo-sv2-price-amt { font-weight: 800; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-price-per { font-weight: 500; font-size: 0.72em; color: var(--sv2-text-secondary, #666); margin-left: 5px; }
/* Multi-season listing: the amount is the cheapest season, so it reads "From $2,000 Per Season
   · 2 seasons". Both qualifiers are muted so the figure stays the loudest thing in the footer. */
.hlrbo-sv2-price-from { font-weight: 500; font-size: 0.72em; color: var(--sv2-text-secondary, #666); margin-right: 5px; }
.hlrbo-sv2-price-seasons { font-weight: 500; font-size: 0.72em; color: var(--sv2-text-secondary, #666); margin-left: 5px; }
.hlrbo-sv2-price-seasons::before { content: "\00b7"; margin-right: 5px; }

/* HuntScore badge — subtle green-tint pill, pushed to the footer's right edge. Only rendered when a
   score is present (LandScoreCachedValue is null until the #8677 backfill). */
.hlrbo-sv2-huntscore {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--sv2-primary-dark);
    background: rgba(110, 136, 63, 0.12);
    padding: 2px 8px;
    border-radius: 10px;
}
.hlrbo-sv2-huntscore-label { font-size: 10px; font-weight: 700; }

/* List view (left pane of the split) — horizontal card: rounded image on the left, body on the right,
   with the image inset by the card's padding (matches the redesigned results card). */
.hlrbo-sv2-results--list .hlrbo-sv2-card {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
}
.hlrbo-sv2-results--list .hlrbo-sv2-card-media {
    flex: 0 0 38%;
    max-width: 240px;
    width: auto;
    min-height: 150px;
    padding-bottom: 0;
    border-radius: 12px;
    overflow: hidden;
    align-self: stretch;
}
.hlrbo-sv2-results--list .hlrbo-sv2-body-link { padding: 2px 2px 2px 0; }
.hlrbo-sv2-results--list .hlrbo-sv2-card-body { padding: 0; gap: 6px; }
.hlrbo-sv2-results--list .hlrbo-sv2-card-title { font-size: 18px; font-weight: 700; }
.hlrbo-sv2-results--list .hlrbo-sv2-card-location { font-size: 14px; }
.hlrbo-sv2-results--list .hlrbo-sv2-card-footer { margin-top: 6px; padding-top: 0; }
.hlrbo-sv2-results--list .hlrbo-sv2-price { font-size: 20px; }
/* Narrow panes: drop to a single image width floor so the body keeps room. */
@media (max-width: 520px) {
    .hlrbo-sv2-results--list .hlrbo-sv2-card-media { flex-basis: 42%; min-height: 120px; }
}

/* ---- Filter strip (S-2, L4-26) — full-width row below the topbar ---- */
/* S-2 filter bar (L4-26): the sticky header band below the topbar. The NL/AI search leads on the left
   (moved out of the topbar, L3-18); the JS-rendered strip (#search-v2-filterstrip) fills the rest with the
   active-filter chips + "Add filter" then the result count / sort / List-Grid-Map control. */
.hlrbo-sv2-filterbar {
    position: sticky;
    top: var(--sv2-topbar-h, 56px);   /* DELIBERATE divergence from the design: the bar is sticky so topbar+bar pin as one continuous header. Goes static on mobile (two-row topbar). */
    /* z-index: 1120 — must clear the listing flyout scrim (1100) and panel (1110).
       Bootstrap modals default to ~1040–1050 but there are no modals on the Search v2
       surface, so 1120 does not conflict with them. If a modal is ever added here,
       ensure its z-index exceeds 1120 or lower this value to sit below Bootstrap's modal stack. */
    z-index: 1120;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--sv2-strip-h, 56px);
    padding: 0 20px;
    background: var(--sv2-bg-warm, #FAF8F4);
    border-bottom: 1px solid var(--sv2-border, #E0E0E0);
}

/* NL/AI search pill. position:relative so searchV2.nlsearch.js can anchor its focus popover + status
   message, which it appends to the input's parentNode (this wrapper). */
.hlrbo-sv2-fs-aisearch {
    position: relative;
    flex: 1 1 460px;   /* lead the filter bar — grow to take the lion's share of the row */
    min-width: 280px;
}
.hlrbo-sv2-fs-aispark {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--hlrbo-accent, #DC7001);
    pointer-events: none;
}
.hlrbo-sv2-fs-searchinput {
    display: block;
    width: 100%;
    height: 44px;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 22px;
    background: #fff;
    color: var(--sv2-text, #1A1A1A);
    padding: 0 116px 0 36px;   /* clear the left spark + the right "AI Search" button */
    font-size: 14.5px;
}
.hlrbo-sv2-fs-searchinput::placeholder { color: #999999; font-style: italic; }
.hlrbo-sv2-fs-searchinput:disabled { cursor: not-allowed; color: var(--sv2-text-secondary, #666); background: #F2F2F0; }
/* Option 1b: house focus ring is GREEN (matches the primary button), not orange. */
.hlrbo-sv2-fs-searchinput:focus { outline: none; border-color: var(--sv2-primary, #6E883F); box-shadow: 0 0 0 3px rgba(110, 136, 63, 0.15); }
.hlrbo-sv2-fs-searchinput.is-loading { opacity: 0.6; cursor: progress; }

/* ============================================================================
   Dark-green skin for the STANDARD site header on Search V2 (L4-25 re-scope).
   _MainSiteLayoutNew renders <header class="header sv2-dark-header"> wrapping _Navigation; these rules
   recolor it to the brand dark green and PIN it (the global scroll-hide transform is neutralized). Scoped
   to .sv2-dark-header — and searchV2.css only loads on V2 — so it can't affect any other page. The mobile
   offcanvas drawer is already dark green in _Navigation, so it is left untouched.
   ============================================================================ */
.sv2-dark-header.header { background-color: var(--sv2-primary-dark, #31420E) !important; }
/* Hide the standard header's own search box on V2 — the filter-bar AI search is the V2 search box. */
.sv2-dark-header .search-wrapper { display: none !important; }
.sv2-dark-header .navbar { background-color: var(--sv2-primary-dark, #31420E) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
/* Pin it: neutralize the global scroll-hide transform so the header never slides out from under the split. */
.sv2-dark-header.header.sticky-top,
.sv2-dark-header.header.sticky-top.navbar-hidden { transform: none !important; }
/* White wordmark on the dark bar. */
.sv2-dark-header .brand-logo-header { background-image: url(/Images/hlrboHeaderLogoWhite.svg) !important; }
/* Light nav links (override _Navigation's black !important). */
.sv2-dark-header .nav-link { color: rgba(255, 255, 255, 0.88) !important; }
.sv2-dark-header .nav-link:hover,
.sv2-dark-header .nav-link:focus,
.sv2-dark-header .nav-link.show,
.sv2-dark-header .dropdown-toggle.show { color: #FFFFFF !important; }
.sv2-dark-header .nav-link.active { color: #FFFFFF !important; border-bottom-color: var(--hlrbo-accent, #DC7001) !important; }
/* Login = light outline; Sign up = accent orange (a green button reads poorly on the dark-green bar). */
.sv2-dark-header .login-button,
.sv2-dark-header .login-button:hover { color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.55) !important; background-color: transparent !important; }
.sv2-dark-header .signup-button,
.sv2-dark-header .signup-button:hover { background-color: var(--hlrbo-accent, #DC7001) !important; border-color: var(--hlrbo-accent, #DC7001) !important; color: #FFFFFF !important; }
/* Signed-in Account button: the inline default is green (#6E883F) for the white site header; on the dark
   header fade it to translucent white so it reads on the dark-green bar (text, border, divider, chevron). */
.sv2-dark-header .acct-btn { color: rgba(255, 255, 255, 0.7) !important; border-color: rgba(255, 255, 255, 0.7) !important; }
.sv2-dark-header .acct-btn .acct-divider { background-color: rgba(255, 255, 255, 0.7) !important; }
.sv2-dark-header .acct-btn .acct-chevron { fill: rgba(255, 255, 255, 0.7) !important; }
.sv2-dark-header .acct-btn .acct-chevron path { stroke: rgba(255, 255, 255, 0.7) !important; }
/* Hamburger toggler (only shown < xxl): light stroke + light border. */
.sv2-dark-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.35) !important; }
.sv2-dark-header .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
/* Raise Account dropdown above the z-1120 filter bar (#9684). */
.sv2-dark-header .dropdown-menu { z-index: 1130 !important; }
/* ...but the pinned header forms its OWN stacking context that sat below the z-1120 filter bar, so a
   centered nav dropdown (e.g. "Lease Your Land", inside .navbar-collapse) was trapped behind the bar —
   a child's z-index can't escape its parent context. Raise the whole header above the bar so every nav
   dropdown paints over it. The header sits above the bar visually anyway (stacked), so no regression. */
.sv2-dark-header.header { z-index: 1130 !important; }

/* The strip is now a flex child of .hlrbo-sv2-filterbar (its bar chrome moved up to the wrapper). */
.hlrbo-sv2-filterstrip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;   /* let the chip row shrink/scroll beside the AI search */
}

.hlrbo-sv2-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    overflow-x: auto;          /* mobile: horizontal scroll on the chip row */
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    /* #9773: hide the scrollbar but fade the right edge so it's visually obvious that
       more filter chips exist off-screen when they overflow the bar. */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.hlrbo-sv2-chips::-webkit-scrollbar { display: none; }
/* #12652: "Filters" lead-in for the chip row. Hidden on desktop (the single-row bar reads as filters
   already); the phone block below shows it. */
.hlrbo-sv2-chips-label { display: none; }

.hlrbo-sv2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 20px;       /* pill */
    border: 1px solid var(--sv2-border, #E0E0E0);
    background: #fff;
    color: var(--sv2-text, #1A1A1A);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.hlrbo-sv2-chip:hover { border-color: var(--sv2-primary, #6E883F); background: rgba(110, 136, 63, 0.04); }
/* Scope chip (state/county) — non-removable. The design uses one uniform white pill for every chip, so
   this keeps the standard look (the absent removal ✕ is the only affordance) and is just non-interactive. */
.hlrbo-sv2-chip--locked { cursor: default; }
.hlrbo-sv2-chip--locked:hover { border-color: var(--sv2-border, #E0E0E0); background: #fff; }
.hlrbo-sv2-chip--add { cursor: pointer; color: var(--sv2-text-secondary, #666); border-style: dashed; }
.hlrbo-sv2-chip--add:hover { color: var(--sv2-primary, #6E883F); border-color: var(--sv2-primary, #6E883F); background: transparent; }
/* "Clear all" — a borderless text action (not a filter pill); resets every removable filter. */
.hlrbo-sv2-chip--clear { border-color: transparent; background: transparent; padding: 0 8px; color: var(--sv2-text-secondary, #666); text-decoration: underline; text-underline-offset: 2px; }
.hlrbo-sv2-chip--clear:hover { border-color: transparent; background: transparent; color: var(--sv2-accent, #DC7001); }

/* Lease Finder shortcut — a white pill with a bookmark glyph + a green count badge (per the design). The
   picker (when there are several) drops a small menu below the button. */
.hlrbo-sv2-chip--saved { cursor: pointer; gap: 7px; color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-chip--saved:hover { border-color: var(--sv2-primary, #6E883F); background: rgba(110, 136, 63, 0.06); color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-saved-ico { display: inline-flex; align-items: center; color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-saved-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--sv2-primary, #6E883F); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.hlrbo-sv2-savedmenu { position: relative; display: inline-flex; flex: 0 0 auto; }
/* Appended to document.body and positioned from the button rect (searchV2.js), so it isn't clipped by the
   chip row's overflow-x. z-index sits above the Mapbox canvas + map overlays. */
.hlrbo-sv2-savedmenu-pop {
    position: absolute; z-index: 1000;
    min-width: 240px; max-width: 320px; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); padding: 6px;
}
.hlrbo-sv2-savedmenu-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.hlrbo-sv2-savedmenu-item:hover { background: rgba(110, 136, 63, 0.08); }
.hlrbo-sv2-savedmenu-label { font-size: 13px; font-weight: 600; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-savedmenu-sub { font-size: 12px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-chip-x {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    color: var(--sv2-text-secondary, #666);
    cursor: pointer;
    opacity: 0.55;
}
.hlrbo-sv2-chip-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); color: var(--sv2-text, #1A1A1A); }

.hlrbo-sv2-strip-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hlrbo-sv2-count { font-size: 13px; color: var(--sv2-text-secondary, #666); font-weight: 600; white-space: nowrap; }

/* SortMenu (S-2) — a text button that opens a radio popover; HuntScore featured with an orange rail. */
.hlrbo-sv2-sortmenu { position: relative; display: inline-block; }
.hlrbo-sv2-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sv2-text, #1A1A1A);
    cursor: pointer;
    white-space: nowrap;
}
.hlrbo-sv2-sort:hover,
.hlrbo-sv2-sort[aria-expanded="true"] { background: rgba(0, 0, 0, 0.04); } /* keep the trigger shaded while the menu is open */
.hlrbo-sv2-sort-label { color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-sort-caret { color: var(--sv2-text-secondary, #666); font-size: 11px; display: inline-block; transition: transform .12s ease; }
.hlrbo-sv2-sort[aria-expanded="true"] .hlrbo-sv2-sort-caret { transform: rotate(180deg); } /* flip the chevron up when open */

.hlrbo-sv2-sortmenu-pop {
    position: absolute;
    top: calc(100% + 6px);
    /* #9793: this popover is portaled to <body> and positioned by a JS-set `left`. Keeping
       `right: 0` made the browser resolve width as (bodyWidth - left), so the menu stretched
       leftward as `left` shrank on scroll/mousemove. Pin a fixed width and drop the right anchor. */
    right: auto;
    width: 300px;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    /* #9769: raise above the filterbar (1120) / flyout panel (1110) / scrim (1100) so the
       sort menu isn't hidden behind an open listing flyout. */
    z-index: 1200;
    padding: 6px;
    overflow: hidden;
}
.hlrbo-sv2-sortmenu-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
}
.hlrbo-sv2-sortmenu-opt:hover { background: rgba(110, 136, 63, 0.08); }
.hlrbo-sv2-sortmenu-opt.is-selected { background: rgba(110, 136, 63, 0.10); }
.hlrbo-sv2-sortmenu-opt:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: -2px; }
.hlrbo-sv2-sortmenu-opt.is-featured { position: relative; }
.hlrbo-sv2-sortmenu-opt.is-featured::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--sv2-accent, #DC7001);
}
.hlrbo-sv2-sortmenu-radio {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--sv2-border, #E0E0E0);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hlrbo-sv2-sortmenu-radio.is-checked { border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-sortmenu-radio.is-checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-sortmenu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hlrbo-sv2-sortmenu-labelrow { display: inline-flex; align-items: center; gap: 8px; }
.hlrbo-sv2-sortmenu-optlabel { font-size: 13.5px; font-weight: 600; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-sortmenu-new {
    background: #A55401; /* orange-active: white "New" clears WCAG AA (was #DC7001 = 3.3:1 -> 5.4:1) */
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
}
.hlrbo-sv2-sortmenu-sub { font-size: 12px; color: var(--sv2-text-secondary, #666); line-height: 1.35; }

/* Segmented view-mode control (List / Grid / Map) — white track, dark-green active fill */
.hlrbo-sv2-viewseg { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 8px; padding: 2px; }
.hlrbo-sv2-viewseg-btn {
    border: none;
    background: transparent;
    width: 34px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sv2-text-secondary, #666);
    cursor: pointer;
    border-radius: 6px;
}
.hlrbo-sv2-viewseg-btn:hover { color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-viewseg-btn.is-active { background: var(--sv2-primary-dark, #31420E); color: #fff; }
.hlrbo-sv2-viewseg-btn:disabled { color: var(--sv2-disabled-fg, #C2C6BA); cursor: not-allowed; }
.hlrbo-sv2-viewseg-btn svg { display: block; }

/* ---- AddFilterPopover (S-7, L4-31) ---- */
.hlrbo-sv2-fp {
    position: absolute;
    z-index: 1050;
    width: 360px;
    max-width: calc(100vw - 16px);
    max-height: 460px;
    display: none;             /* open() sets display:flex */
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, sans-serif);
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-fp-head { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--sv2-border, #E0E0E0); }
/* Search-within-filters: a filled pill with a leading magnifier (design .vc-addfilter-search). */
.hlrbo-sv2-fp-searchwrap { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; background: var(--sv2-bg, #F8F9FA); border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 6px; padding: 5px 10px; }
.hlrbo-sv2-fp-searchwrap svg { display: block; flex: 0 0 auto; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-fp-search { flex: 1 1 auto; font-size: 13px; border: 0; background: transparent; outline: 0; padding: 0; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-fp-close { border: none; background: transparent; font-size: 14px; color: var(--sv2-text-secondary, #666); cursor: pointer; padding: 4px 6px; }

.hlrbo-sv2-fp-acc { overflow-y: auto; flex: 1 1 auto; }
.hlrbo-sv2-fp-section { border-bottom: 1px solid var(--sv2-divider, #F0F0EE); }
.hlrbo-sv2-fp-secbtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: none;
    padding: 11px 12px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-fp-secbtn:hover { background: #FAF8F4; }
.hlrbo-sv2-fp-secbtn.is-open { background: var(--sv2-bg-warm, #FAF8F4); }
.hlrbo-sv2-fp-secbtn:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: -2px; }
.hlrbo-sv2-fp-secbtn:disabled { color: var(--sv2-placeholder-fg, #B6BBAD); cursor: not-allowed; }
.hlrbo-sv2-fp-chev { width: 12px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-fp-seclabel { flex: 1 1 auto; }
.hlrbo-sv2-fp-badge { background: var(--sv2-primary, #6E883F); color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 999px; }

.hlrbo-sv2-fp-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.hlrbo-sv2-fp-range { display: flex; align-items: center; gap: 8px; }
.hlrbo-sv2-fp-dash { color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-fp-num, .hlrbo-sv2-fp-select { width: 100%; font-size: 13px; padding: 6px 10px; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 6px; }
.hlrbo-sv2-fp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.hlrbo-sv2-fp-note { font-size: 13px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-fp-empty { padding: 24px 14px; text-align: center; font-size: 13px; color: var(--sv2-text-secondary, #666); }

.hlrbo-sv2-fp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sv2-border, #E0E0E0); background: var(--sv2-bg-warm, #FAF8F4); }
.hlrbo-sv2-fp-clear { background: transparent; border: none; color: var(--sv2-text-secondary, #666); font-size: 13px; cursor: pointer; }
.hlrbo-sv2-fp-clear:hover { color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-fp-apply { background: var(--sv2-primary-dark, #31420E); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; } /* dark-green to match the design's .vc-addfilter-apply */
.hlrbo-sv2-fp-apply:hover { background: var(--sv2-green-active, #4D6029); }

/* AddFilterPopover internals (Variant C): leading category icon, right-aligned count+chevron, 2-col
   checkbox grids, single-select pill toggles, and the max-price slider. */
.hlrbo-sv2-fp-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: 0 0 18px; color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-fp-icon svg { display: block; }
.hlrbo-sv2-fp-secright { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.hlrbo-sv2-fp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }

.hlrbo-sv2-fp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hlrbo-sv2-fp-pill { background: #fff; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--sv2-text, #1A1A1A); cursor: pointer; }
.hlrbo-sv2-fp-pill:hover { border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-fp-pill.is-active { background: var(--sv2-primary, #6E883F); color: #fff; border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-fp-pill:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }

.hlrbo-sv2-fp-slider { display: flex; flex-direction: column; gap: 6px; }
.hlrbo-sv2-fp-slider-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-fp-slider-val { color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-fp-range-slider { width: 100%; accent-color: var(--sv2-primary, #6E883F); cursor: pointer; min-height: 24px; }
.hlrbo-sv2-fp-slider-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--sv2-text-secondary, #666); } /* #666 = 5.7:1 (the #999 tier failed AA) */

/* ============================================================================
   Split layout (S-4 CardGrid / S-5 MapCanvas, L4-28/29) — Variant C "Split View"
   ----------------------------------------------------------------------------
   Default ("list") view: compact card list on the left (30%), dominant map on the
   right (70%). The "grid" view drops the map and lays the cards out full-width in a
   multi-column grid; the "map" view drops the list and the map fills the width.
   searchV2.js toggles .hlrbo-sv2-split--{list,grid,map} on #search-v2-split.
   ============================================================================ */
.hlrbo-sv2-split {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    min-height: calc(100vh - var(--sv2-topbar-h, 56px) - var(--sv2-strip-h, 56px));
}

.hlrbo-sv2-grid-pane { padding: 20px 20px 40px; min-width: 0; }
.hlrbo-sv2-grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hlrbo-sv2-grid-head h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.2; }
.hlrbo-sv2-grid-sub { font-size: 12.5px; color: var(--sv2-text-secondary, #666); margin-top: 4px; }

/* Map pane — sticky, fills the viewport below the topbar + strip */
.hlrbo-sv2-map-pane {
    position: sticky;
    top: calc(var(--sv2-topbar-h, 56px) + var(--sv2-strip-h, 56px));
    height: calc(100vh - var(--sv2-topbar-h, 56px) - var(--sv2-strip-h, 56px));
    border-left: 1px solid var(--sv2-border, #E0E0E0);
    background: var(--sv2-map-bg, #E8E4DA);
    overflow: hidden;
}

/* The Mapbox surface fills its pane. position:relative anchors the floating
   "Search this area" / "Layers" buttons + the 200-pin cap-note overlays. */
.hlrbo-sv2-map { position: relative; width: 100%; height: 100%; }

/* Results: single column in the list/split pane, multi-column in the grid view. */
.hlrbo-sv2-results--list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.hlrbo-sv2-results--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---- Featured carousel (paid boosts, "Best match" only) ----
   A tinted, labeled strip above the results so promoted listings read as promoted, not as the first
   organic matches. Cards are the normal result card at a fixed width in a scroll-snap row. */
.hlrbo-sv2-featured {
    background: var(--sv2-featured-bg, #FDF3E7);
    border: 1px solid var(--sv2-featured-line, #F2D2AE);
    border-top: 3px solid var(--sv2-featured, #B35A00);
    border-radius: 12px;
    padding: 16px 16px 8px;
    margin-bottom: 24px;
    min-width: 0;
}
.hlrbo-sv2-featured[hidden] { display: none; }
.hlrbo-sv2-featured-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hlrbo-sv2-featured-title { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.2; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-featured-title::before { content: "\2605"; color: var(--sv2-featured, #B35A00); margin-right: 6px; }
.hlrbo-sv2-featured-sub { font-size: 12.5px; color: var(--sv2-text-secondary, #666); margin-top: 2px; }
.hlrbo-sv2-featured-nav { display: flex; gap: 8px; flex: none; }
.hlrbo-sv2-featured-nav[hidden] { display: none; }
.hlrbo-sv2-featured-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--sv2-border, #E0E0E0);
    background: #fff;
    color: var(--sv2-text, #1A1A1A);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.hlrbo-sv2-featured-btn:hover:not(:disabled) { border-color: var(--sv2-featured, #B35A00); color: var(--sv2-featured, #B35A00); }
.hlrbo-sv2-featured-btn:disabled { opacity: 0.4; cursor: default; }
.hlrbo-sv2-featured-btn:focus-visible,
.hlrbo-sv2-featured-track:focus-visible { outline: 2px solid var(--sv2-featured, #B35A00); outline-offset: 2px; }
.hlrbo-sv2-featured-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding: 2px 2px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.hlrbo-sv2-featured-track > .hlrbo-sv2-featured-cell { flex: 0 0 300px; max-width: 85%; scroll-snap-align: start; }
.hlrbo-sv2-featured-cell > .hlrbo-sv2-card { box-shadow: 0 0 0 1px var(--sv2-featured-line, #F2D2AE), 0 4px 14px rgba(0, 0, 0, 0.08); }

/* Each card occupies one grid cell and fills it (equal-height cards per row) */
.hlrbo-sv2-card-cell { display: flex; }
.hlrbo-sv2-card-cell > .hlrbo-sv2-card { flex: 1 1 auto; }

/* ---- View modes (toggled on #search-v2-split) ---- */
/* GRID — full-width multi-column card grid, no map */
.hlrbo-sv2-split--grid { grid-template-columns: 1fr; }
.hlrbo-sv2-split--grid .hlrbo-sv2-map-pane { display: none; }
.hlrbo-sv2-split--grid .hlrbo-sv2-grid-pane { max-width: 1320px; margin: 0 auto; width: 100%; padding: 24px 32px 48px; }
.hlrbo-sv2-split--grid .hlrbo-sv2-grid-head h1 { font-size: 26px; }
.hlrbo-sv2-split--grid .hlrbo-sv2-grid-sub { font-size: 13.5px; }

/* MAP — map fills the viewport, no list */
.hlrbo-sv2-split--map { grid-template-columns: 1fr; }
.hlrbo-sv2-split--map .hlrbo-sv2-grid-pane { display: none; }
.hlrbo-sv2-split--map .hlrbo-sv2-map-pane { border-left: 0; }

/* COLLAPSED — the list pane folds away and the map takes the full width. Toggled by the
   .hlrbo-sv2-collapse tab (searchV2.js setListCollapsed). Scoped to the "list" (split) view:
   the grid view has no map and the map view already hides the list. */
.hlrbo-sv2-split--list.hlrbo-sv2-split--collapsed { grid-template-columns: 1fr; }
.hlrbo-sv2-split--list.hlrbo-sv2-split--collapsed .hlrbo-sv2-grid-pane { display: none; }
.hlrbo-sv2-split--list.hlrbo-sv2-split--collapsed .hlrbo-sv2-map-pane { border-left: 0; }

/* The collapse tab rides the list/map seam (left edge of the map pane), vertically centered —
   white-pill language (matching the other floating map controls). The chevron points at the list
   while it's open (collapse direction) and flips outward once collapsed (restore direction). */
.hlrbo-sv2-collapse {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 56px;
    padding: 0;
    background: #fff;
    color: var(--sv2-primary-dark, #31420E);
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}
/* Always white — the button must read as white in every state (default / hover / focus / collapsed).
   Hover affordance comes from a slightly deeper shadow rather than a fill tint. */
.hlrbo-sv2-collapse,
.hlrbo-sv2-collapse:hover,
.hlrbo-sv2-collapse:focus { background: #fff; }
.hlrbo-sv2-collapse:hover { box-shadow: 2px 0 10px rgba(0, 0, 0, 0.16); }
.hlrbo-sv2-collapse:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }
.hlrbo-sv2-collapse svg { display: block; transition: transform 0.15s ease; }
.hlrbo-sv2-split--collapsed .hlrbo-sv2-collapse svg { transform: rotate(180deg); }
/* The map view already hides the list — the tab would be a confusing no-op there. */
.hlrbo-sv2-split--map .hlrbo-sv2-collapse { display: none; }

/* 200-pin cap affordance (#8521) — small chip at the bottom-center; surfaces that the map is showing
   a capped subset (never silently truncates). */
.hlrbo-sv2-map-capnote {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: 6px 14px;
    background: rgba(26, 26, 26, 0.82);
    color: #fff;
    border-radius: 16px;
    font: 400 12px var(--hlrbo-font, 'Figtree', sans-serif);
    max-width: calc(100% - 32px);
    text-align: center;
}

/* #8854 — pin-glyph legend: a collapsed (i) button at the map TOP-LEFT (the only corner free of map
   chrome — nav=top-right, scale/attribution=bottom-right, "Layers" float + Mapbox logo=bottom-left,
   cap-note=bottom-center). Clicking the button expands a small key. Glyph fill is currentColor, so the
   green here matches the pins. */
.hlrbo-sv2-legend {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    font: 400 12px var(--hlrbo-font, 'Figtree', sans-serif);
}
.hlrbo-sv2-legend__toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hlrbo-border, #E0E0E0);
    background: #fff;
    color: var(--hlrbo-primary, #6E883F);
    font: 700 15px var(--hlrbo-font, 'Figtree', sans-serif);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hlrbo-sv2-legend__toggle:hover,
.hlrbo-sv2-legend__toggle:focus,
.hlrbo-sv2-legend--open .hlrbo-sv2-legend__toggle {
    background: var(--hlrbo-primary, #6E883F);
    color: #fff;
    outline: none;
}
.hlrbo-sv2-legend__panel {
    margin-top: 6px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--hlrbo-border, #E0E0E0);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    max-width: 230px;
}
.hlrbo-sv2-legend__title {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--hlrbo-text, #1A1A1A);
}
.hlrbo-sv2-legend__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hlrbo-sv2-legend__row + .hlrbo-sv2-legend__row { margin-top: 6px; }
.hlrbo-sv2-legend__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--hlrbo-primary, #6E883F); /* drives the glyph SVG fill (currentColor) */
    flex: 0 0 auto;
}
.hlrbo-sv2-legend__glyph svg { display: block; width: 16px; height: 16px; }
.hlrbo-sv2-legend__label { color: var(--hlrbo-text-secondary, #666666); }

/* ---- Infinite scroll (replaces the S-12 prev/next pager) ---- */
/* Bottom sentinel: searchV2.js observes it and appends the next page as it nears the viewport. */
.hlrbo-sv2-infinite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;          /* give the observer a target even when its status line is empty */
    margin-top: 24px;
    font-size: 13px;
    color: var(--sv2-text-secondary, #666);
}
.hlrbo-sv2-infinite-label { font-weight: 600; }
.hlrbo-sv2-infinite-end { font-weight: 600; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-infinite-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--sv2-border, #E0E0E0);
    border-top-color: var(--sv2-primary, #6E883F);
    border-radius: 50%;
    animation: hlrbo-sv2-spin 0.7s linear infinite;
}
@keyframes hlrbo-sv2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hlrbo-sv2-infinite-spinner { animation-duration: 1.6s; } }
/* Manual fallback button (no IntersectionObserver) + the retry-after-error affordance. */
.hlrbo-sv2-infinite-more {
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid var(--sv2-primary, #6E883F);
    border-radius: 8px;
    background: #fff;
    color: var(--sv2-primary, #6E883F);
    cursor: pointer;
}
.hlrbo-sv2-infinite-more:hover { background: var(--sv2-primary, #6E883F); color: #fff; }

/* ---- EmptyState (S-9, L4-33) ---- */
.hlrbo-sv2-empty { grid-column: 1 / -1; display: flex; justify-content: center; padding: 48px 16px; }
.hlrbo-sv2-empty-card { max-width: 480px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hlrbo-sv2-empty-title { font-size: 20px; font-weight: 600; margin: 0; }
.hlrbo-sv2-empty-body { font-size: 14px; color: var(--sv2-text-secondary, #666); margin: 0; }
.hlrbo-sv2-empty-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.hlrbo-sv2-empty-clear {
    background: var(--sv2-primary, #6E883F);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.hlrbo-sv2-empty-clear:hover { background: var(--sv2-green-hover, #5A7033); }
.hlrbo-sv2-empty-maplink { font-size: 14px; color: var(--sv2-primary, #6E883F); text-decoration: none; }
.hlrbo-sv2-empty-maplink:hover { text-decoration: underline; }
.hlrbo-sv2-empty-browse { font-size: 13px; color: var(--sv2-text-secondary, #666); text-decoration: none; }
.hlrbo-sv2-empty-browse:hover { text-decoration: underline; }

/* ---- SEO server-render layer (L4-38): crawler-visible fallback, hidden by JS post-hydration ---- */
.hlrbo-sv2-seo { max-width: 1320px; margin: 24px auto; padding: 0 20px; }
.hlrbo-sv2-seo-intro { font-size: 14px; color: var(--sv2-text-secondary, #666); line-height: 1.6; }
.hlrbo-sv2-seo-item { padding: 8px 0; border-top: 1px solid var(--sv2-border, #E0E0E0); }
.hlrbo-sv2-seo-item h2 { font-size: 16px; margin: 0 0 2px; }
.hlrbo-sv2-seo-item h2 a { color: var(--sv2-primary-dark, #31420E); text-decoration: none; }
.hlrbo-sv2-seo-item p { font-size: 13px; color: var(--sv2-text-secondary, #666); margin: 0; }

/* ---- S-13 skeleton loaders (L4-37): card placeholders shown during fetch/re-fetch.
   The whole card pulses opacity 1 -> 0.6 -> 1 over 1.5s (animate-pulse equivalent); the gray blocks
   are static #F2F0E9. Reuses .hlrbo-sv2-card / -card-body so the skeleton matches PropertyCard
   dimensions. Honors prefers-reduced-motion. ---- */
.hlrbo-sv2-skeleton { pointer-events: none; animation: hlrbo-sv2-skel-pulse 1.5s ease-in-out infinite; }
.hlrbo-sv2-skel-media { width: 100%; padding-bottom: 56.25%; background: #F2F0E9; } /* matches -card-media */
.hlrbo-sv2-skel-line { height: 12px; border-radius: 4px; background: #F2F0E9; }
.hlrbo-sv2-skel-line--title { width: 80%; height: 16px; }
.hlrbo-sv2-skel-line--loc { width: 55%; }
.hlrbo-sv2-skel-line--meta { width: 40%; }
.hlrbo-sv2-skel-line--price { width: 32%; height: 18px; margin-top: auto; } /* sticks to card bottom like the footer */
@keyframes hlrbo-sv2-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .hlrbo-sv2-skeleton { animation: none; } }

/* "AI Search" button pinned inside the right edge of the NL search box — runs the natural-language search
   on click (same as pressing Enter). */
.hlrbo-sv2-nl-go {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    /* Option 1b: PRIMARY GREEN, never orange — orange is reserved for the nav Sign Up CTA. */
    background: var(--sv2-primary, #6E883F);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}
.hlrbo-sv2-nl-go:hover { background: #5A7033; }   /* −15% */
.hlrbo-sv2-nl-go:active { background: #4D6029; }  /* −25% */
.hlrbo-sv2-nl-go:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }
.hlrbo-sv2-nl-go svg { display: block; }
/* L3-18 NL search disclaimer (placeholder copy, pending Noelle legal review #8454). Shown as a small
   dark popover under the search box on focus (the 56px topbar can't carry it inline). The inline error
   message reuses this class with --error, which forces it visible regardless of focus. */
.hlrbo-sv2-nl-disclaimer {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 80;
    background: #31420E;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(250, 248, 244, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.hlrbo-sv2-fs-aisearch:focus-within .hlrbo-sv2-nl-disclaimer { display: block; }
.hlrbo-sv2-nl-disclaimer--error { display: block; color: var(--hlrbo-warning, #FFC107); }

/* NL search example-prompts popover (focus) — built by searchV2.nlsearch.js. A white card under the box
   with tappable example queries + the AI disclaimer in the footer. */
.hlrbo-sv2-nl-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 80;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
    padding: 6px;
    color: var(--sv2-text, #1A1A1A);
    overflow: hidden;
}
.hlrbo-sv2-nl-pop-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-nl-pop-spark { display: inline-flex; flex: 0 0 auto; }
.hlrbo-sv2-nl-pop-beta { margin-left: auto; background: rgba(220, 112, 1, 0.12); color: #A55401; font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 8px; letter-spacing: 0.5px; text-transform: uppercase; } /* orange-active on the tint = 4.76:1 (was #DC7001 = 2.9:1) */
.hlrbo-sv2-nl-examples { display: flex; flex-direction: column; padding: 2px 0 6px; }
.hlrbo-sv2-nl-example { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--sv2-text, #1A1A1A); cursor: pointer; font-family: inherit; }
.hlrbo-sv2-nl-example:hover { background: rgba(110, 136, 63, 0.08); }
.hlrbo-sv2-nl-example:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: -2px; }
.hlrbo-sv2-nl-example-ico { display: inline-flex; flex: 0 0 auto; color: var(--sv2-text-tertiary, #999); }
.hlrbo-sv2-nl-example-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlrbo-sv2-nl-example-arrow { display: inline-flex; flex: 0 0 auto; color: var(--sv2-text-tertiary, #999); opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.hlrbo-sv2-nl-example:hover .hlrbo-sv2-nl-example-arrow,
.hlrbo-sv2-nl-example:focus-visible .hlrbo-sv2-nl-example-arrow { opacity: 1; transform: translateX(2px); color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-nl-pop-foot { border-top: 1px solid #F2F0EA; padding: 9px 10px 8px; margin-top: 2px; font-size: 12px; color: var(--sv2-text-secondary, #666); line-height: 1.4; } /* legal disclaimer must clear AA: #666 = 5.7:1 */

/* ---- S-10 Map FAB (L4-34): mobile-only floating pill that switches to the in-page map view.
   Hidden on desktop, where the map is the split-pane's right column. ---- */
.hlrbo-sv2-mapfab {
    display: none; /* shown only < 768px (see media query) */
    position: fixed; bottom: 24px; right: 24px; z-index: 50;
    align-items: center; gap: 8px;
    height: 52px; padding: 0 22px;
    background: #31420E; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
    font-family: inherit; cursor: pointer; /* the FAB is a <button> (#11144) — neither is inherited */
    border: 2px solid #DC7001; border-radius: 999px; /* pill + orange ring (outdoor-brand-moves §3.4) */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.hlrbo-sv2-mapfab:hover, .hlrbo-sv2-mapfab:focus { background: var(--sv2-green-active, #4D6029); color: #fff; }

@media (max-width: 767px) {
    /* DEF-12157: the filter strip's right-hand cluster (count/sort/heart/segmented control) cannot
       shrink at flex:0 0 auto (base rule, :505), forcing ~366px into a 335px content box. Let the
       strip wrap to a second row and let the right cluster shrink/wrap with it. Wrapping adds a
       second row, and the browser-measured wrapped strip is 82px total, so --sv2-strip-h (56px
       base) is set to 82px here to keep the map-pane calc() below in sync -- see the matching
       update to the 96+82 hardcoded fallback below. (DEF-12158: was previously 92px, 10px taller
       than the strip actually measures, which stole 10px from the map pane below.) */
    #search-v2-root { --sv2-strip-h: 82px; }
    .hlrbo-sv2-filterstrip { flex-wrap: wrap; row-gap: 8px; }
    .hlrbo-sv2-strip-right { flex: 1 1 100%; min-width: 0; justify-content: space-between; gap: 6px; }
    /* DEF-12157 (round 2, measured 375px overflow=7px): the wrapped right-row still overflowed because
       none of its 3 children could shrink below their text/content width (flexbox default min-width:auto
       blocks shrinking a text node below its intrinsic size, so justify-content:space-between had nothing
       to compress). The 3 view-seg buttons are a hard floor (44px touch target, :1095) and must not move.
       So make the result-count text the ONLY flexible/shrinkable child: min-width:0 lets it shrink past
       its content width, overflow+ellipsis truncates instead of forcing the row wider. Lock the sort menu
       and view-seg to their content size (flex:0 0 auto) so they never absorb the squeeze instead. */
    .hlrbo-sv2-count { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .hlrbo-sv2-sortmenu, .hlrbo-sv2-strip-right .hlrbo-sv2-viewseg { flex: 0 0 auto; }

    /* S-10 mobile: the NL error message flows inline below the AI search on phones. */
    .hlrbo-sv2-nl-disclaimer { position: static; margin-top: 4px; background: transparent; border: 0; box-shadow: none; padding: 4px 0 0; }
    .hlrbo-sv2-filterbar { position: static; flex-wrap: wrap; row-gap: 10px; padding: 12px 20px; } /* avoid sticky-stacking under the taller two-row topbar; wrap so the AI search + chips stack. #9795: 12px of air top and bottom — the AI search box sat flush against the fixed header (its top edge AT the header's bottom edge at 375px). */
    /* #12652: on phones the chip row is not a sideways scroller. Every chip wraps into view (no fade,
       no hidden chips, no scroll gesture fighting the page), and a funnel + "Filters" label opens the
       row so it reads as the filter control it is. */
    .hlrbo-sv2-chips { flex-wrap: wrap; row-gap: 8px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .hlrbo-sv2-chips-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sv2-text-secondary, #666); padding-right: 2px; }
    .hlrbo-sv2-fs-aisearch { flex: 1 1 100%; } /* full-width AI search on its own row; chips wrap below */

    /* The split collapses to a single column on phones: the list shows by default and the Map FAB /
       segmented control switches to the full-screen map (matches the Variant C mobile toggle). */
    .hlrbo-sv2-split { grid-template-columns: 1fr; min-height: 0; } /* desktop 100vh floor would be wrong under the taller two-row topbar */
    .hlrbo-sv2-split--list .hlrbo-sv2-map-pane { display: none; }
    /* Map fills the visible viewport below the header + the filter bar. Both tokens are written at
       runtime by SearchV2.cshtml's header-measure script (#9795: the bar is measured too — on phones
       it wraps to ~180px, not the 82px the DEF-12157/12158 estimate assumed, which left the map 75px
       taller than the viewport). The px values here are only fallbacks for a script-less render. dvh
       excludes the mobile URL bar; the vh line is the fallback for engines without dvh. */
    .hlrbo-sv2-map-pane {
        position: static;
        height: calc(100vh - 178px);
        height: calc(100dvh - var(--sv2-topbar-h-mobile, 96px) - var(--sv2-strip-h, 56px));
        min-height: 320px;
        border-left: 0;
    }
    .hlrbo-sv2-collapse { display: none; } /* single-column on phones — the Map FAB handles list<->map */
    .hlrbo-sv2-results--grid { grid-template-columns: 1fr; } /* grid view is single-column on phones */
    .hlrbo-sv2-grid-pane { padding-bottom: 88px; }            /* clear the fixed Map FAB */
    .hlrbo-sv2-split--grid .hlrbo-sv2-grid-pane { padding: 20px 20px 88px; }
    .hlrbo-sv2-mapfab { display: inline-flex; }

    /* Touch targets ~>=44px on phones (CLAUDE.md design system). The chip removal ✕ keeps its small
       glyph but gains a 44px invisible hit area; the heart and segmented buttons grow. */
    .hlrbo-sv2-heart { width: 44px; height: 44px; }
    .hlrbo-sv2-chip-x { position: relative; }
    .hlrbo-sv2-chip-x::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
    .hlrbo-sv2-viewseg-btn { min-width: 44px; height: 36px; }
    /* Add-filter pills + NL example rows are primary mobile filtering surfaces — meet the 44px target. */
    .hlrbo-sv2-fp-pill { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
    .hlrbo-sv2-nl-example { min-height: 44px; }
}

/* Featured carousel on phones. Kept BELOW the first 767px block on purpose: HLRBOWebApi.Tests
   SearchV2StripWrapTests reads the FIRST @media (max-width: 767px) body for the filter-strip rules. */
@media (max-width: 767px) {
    .hlrbo-sv2-featured { padding: 14px 12px 6px; border-radius: 10px; }
    .hlrbo-sv2-featured-nav { display: none; } /* swipe on touch */
    .hlrbo-sv2-featured-track > .hlrbo-sv2-featured-cell { flex-basis: 82%; }
}

/* ============================================================================
   DetailDrawer (S-6, L4-30)  +  mobile bottom-sheet (L4-35)
   ----------------------------------------------------------------------------
   Desktop: a right-anchored slide-in panel over a dimmed scrim. Mobile (<768px):
   the SAME panel restyled into a bottom sheet with a peek state (.is-peek). Both
   the slide and the sheet honor prefers-reduced-motion. Built by searchV2.drawer.js.
   ============================================================================ */

/* Scrim — dims the page behind the panel; clicking it closes the drawer. */
.hlrbo-sv2-dw-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(26, 26, 26, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.hlrbo-sv2-dw-scrim.is-open { opacity: 1; visibility: visible; }

/* Panel — right-side slide-in on desktop. Off-screen (translateX 100%) until .is-open. */
.hlrbo-sv2-dw {
    position: fixed;
    top: calc(var(--sv2-topbar-h, 56px) + var(--sv2-strip-h, 56px)); /* below the topbar+strip — a non-modal panel over the map on desktop; mobile overrides to a bottom sheet */
    right: 0;
    bottom: 0;
    z-index: 1110;
    width: 460px;            /* comfortable single-column reading width on desktop; full-width on mobile (media query below) */
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-dw.is-open { transform: translateX(0); visibility: visible; }
.hlrbo-sv2-dw:focus { outline: none; }

/* Grab handle — mobile bottom-sheet only; hidden on desktop. */
.hlrbo-sv2-dw-grab { display: none; }

/* Header: Share + Close, pinned at the top of the panel. */
.hlrbo-sv2-dw-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
}
.hlrbo-sv2-dw-share {
    margin-right: auto;
    background: transparent;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--sv2-text, #1A1A1A);
    cursor: pointer;
}
.hlrbo-sv2-dw-share:hover { background: #FAF8F4; }
.hlrbo-sv2-dw-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--sv2-surface-muted, #F1F3EC);
    color: var(--sv2-text-secondary, #666);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.hlrbo-sv2-dw-close:hover { background: var(--sv2-surface-muted-hover, #E6E9DF); color: var(--sv2-text, #1A1A1A); }

/* Hero — 16:9 image (or neutral placeholder). */
.hlrbo-sv2-dw-hero {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: var(--sv2-placeholder-bg, #E8EAE4);
    flex: 0 0 auto;
}
.hlrbo-sv2-dw-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hlrbo-sv2-dw-hero--empty::after {
    content: "HLRBO";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sv2-placeholder-fg, #B6BBAD);
    font-weight: 700;
    letter-spacing: 0.08em;
}
/* The flags + heart reuse the card classes; override only their position within the taller hero. */
.hlrbo-sv2-dw-flags { top: 12px; left: 12px; }
.hlrbo-sv2-dw-heart { top: 12px; right: 12px; }

/* Body */
.hlrbo-sv2-dw-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hlrbo-sv2-dw-title { font-size: 24px; font-weight: 700; margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
.hlrbo-sv2-dw-location { font-size: 14px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-dw-stubnote { font-size: 14px; color: var(--sv2-text-secondary, #666); margin: 0; }

/* "No active listing" status pill on the parcel flyout — gray dot + label, hugging its content. */
.hlrbo-sv2-dw-nolisting {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: #F4F4F6;
    color: var(--sv2-text-secondary, #666);
    font-size: 12px;
    font-weight: 500;
}
.hlrbo-sv2-dw-nolisting-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9CA3AF;
}

.hlrbo-sv2-dw-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 4px 0;
    border-top: 1px solid var(--sv2-border, #E0E0E0);
    border-bottom: 1px solid var(--sv2-border, #E0E0E0);
}
.hlrbo-sv2-dw-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.hlrbo-sv2-dw-stat-value { font-size: 15px; font-weight: 700; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-dw-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--sv2-text-secondary, #666); }

.hlrbo-sv2-dw-features { display: flex; flex-direction: column; gap: 4px; }
.hlrbo-sv2-dw-feature { font-size: 13px; color: var(--sv2-text-secondary, #666); }

/* Footer actions — pinned at the bottom; "Inquire about this lease" is the primary (accent) CTA. */
.hlrbo-sv2-dw-foot {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-top: 1px solid var(--sv2-border, #E0E0E0);
}
.hlrbo-sv2-dw-view {
    flex: 1 1 auto;
    text-align: center;
    background: var(--sv2-primary, #6E883F);
    color: #fff;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.hlrbo-sv2-dw-view:hover { background: var(--sv2-green-hover, #5A7033); color: #fff; text-decoration: none; }
/* "Save parcel" icon (parcel flyout -> the user's Lease Finder saved-parcels list). A circular outlined
   icon button anchored top-right of the body, beside the title (mirrors the card save-heart). The bookmark
   is an outline by default and fills green once the parcel is saved (keyed on .is-saved). */
.hlrbo-sv2-dw-body--parcel { position: relative; }
.hlrbo-sv2-dw-body--parcel .hlrbo-sv2-dw-title { padding-right: 170px; }   /* clear the 3 top-right icons (wrench + save + close) */
.hlrbo-sv2-saveparcel {
    position: absolute;
    top: 12px;
    right: 66px;          /* middle of the cluster: close (16) + 44 + 6 gap */
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 50%;
    background: #fff;
    color: var(--sv2-primary, #6E883F);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hlrbo-sv2-saveparcel svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hlrbo-sv2-saveparcel:hover { border-color: var(--sv2-primary, #6E883F); background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-saveparcel.is-saved { border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-saveparcel.is-saved svg { fill: currentColor; }
.hlrbo-sv2-saveparcel[data-busy="1"] { opacity: 0.7; cursor: default; }
.hlrbo-sv2-saveparcel:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }

/* Close ✕ — rightmost of the parcel top-right cluster; same circle as Save, neutral color. */
.hlrbo-sv2-parcelclose {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 50%;
    background: #fff;
    color: var(--sv2-text, #1A1A1A);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hlrbo-sv2-parcelclose:hover { background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-parcelclose:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }

/* "Save to which Lease Finder profile?" chooser — shown only when the user has 2+ profiles. */
.hlrbo-sv2-lrchooser-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}
.hlrbo-sv2-lrchooser {
    width: 100%;
    max-width: 380px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.hlrbo-sv2-lrchooser-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-lrchooser-list { display: flex; flex-direction: column; gap: 8px; }
.hlrbo-sv2-lrchooser-opt {
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 8px;
    background: #fff;
    color: var(--sv2-text, #1A1A1A);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hlrbo-sv2-lrchooser-opt:hover { border-color: var(--sv2-primary, #6E883F); background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-lrchooser-opt:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }
.hlrbo-sv2-lrchooser-cancel {
    margin-top: 14px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sv2-text-secondary, #666);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.hlrbo-sv2-lrchooser-cancel:hover { color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-lrchooser-cancel:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }
/* Similar-listings strip (#8533) — horizontal-scroll row of compact cards in the drawer body. */
.hlrbo-sv2-dw-similar { padding: 4px 16px 8px; }
.hlrbo-sv2-dw-similar-title { font-size: 14px; font-weight: 600; margin: 4px 0 10px; color: var(--sv2-text, #1A1A1A); }
/* #10038: the track already scrolled, but a card landed flush against the
   panel's right edge, so the row read as "clipped/broken" rather than
   "scrollable". Two affordances, no layout-mode change: the track bleeds into
   the panel's 16px side padding so the next card visibly PEEKS past the edge,
   and a right-edge fade cues that more follows. scroll-padding keeps snapped
   cards clear of the bleed. */
.hlrbo-sv2-dw-similar-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    margin-right: -16px;
    padding-right: 28px;
    scroll-padding-left: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
/* Once the row is scrolled to the end there is nothing more to reveal — drop
   the fade so the last card isn't permanently dimmed. */
.hlrbo-sv2-dw-similar-track.is-scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
}
.hlrbo-sv2-dw-similar-card {
    flex: 0 0 144px;
    width: 144px;
    text-align: left;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 10px;
    background: #fff;
    padding: 0 0 8px;
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    font-family: inherit;
}
.hlrbo-sv2-dw-similar-card:hover { border-color: var(--sv2-primary, #6E883F); }
/* Inset rings (these elements clip an outward outline via overflow:hidden / the sheet edge). */
.hlrbo-sv2-dw-similar-card:focus-visible,
.hlrbo-sv2-dw-grab:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: -2px; }
.hlrbo-sv2-dw-similar-thumb { position: relative; width: 100%; height: 84px; background: var(--sv2-placeholder-bg, #E8EAE4); }
.hlrbo-sv2-dw-similar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlrbo-sv2-dw-similar-thumb--empty::after {
    content: "HLRBO";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sv2-placeholder-fg, #B6BBAD);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.hlrbo-sv2-dw-similar-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sv2-text, #1A1A1A);
    padding: 8px 8px 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hlrbo-sv2-dw-similar-price { display: block; font-size: 12px; color: var(--sv2-text-secondary, #666); padding: 0 8px; }

@media (prefers-reduced-motion: reduce) {
    .hlrbo-sv2-dw { transition: none; }
    .hlrbo-sv2-dw-scrim { transition: none; }
}

/* Mobile bottom-sheet (L4-35): the same panel anchored to the bottom, full-width, sliding UP. A grab
   handle toggles a peek height (.is-peek) vs. the full sheet. The in-page map fills the viewport. */
@media (max-width: 767px) {
    .hlrbo-sv2-dw {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
        transform: translateY(100%);             /* off-screen below until open */
        transition: transform 0.25s ease, visibility 0.25s ease;
    }
    .hlrbo-sv2-dw.is-open { transform: translateY(0); }
    /* Peek: only the handle + header + hero top show above the fold; tap the handle to expand. */
    .hlrbo-sv2-dw.is-peek { max-height: 42vh; }

    .hlrbo-sv2-dw-grab {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 44px;                /* >=44px touch target; the visible bar stays 4px (below) */
        border: none;
        background: #fff;
        border-radius: 16px 16px 0 0;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .hlrbo-sv2-dw-grab-bar { width: 40px; height: 4px; border-radius: 2px; background: #cfd3c6; display: block; }

    /* Share is a compact pill on desktop; give it a full 44px touch target on the mobile sheet. */
    .hlrbo-sv2-dw-share { min-height: 44px; }
}

/* Background scroll-lock while the drawer/scrim is open (modal hygiene). */
body.hlrbo-sv2-dw-lock { overflow: hidden; }

/* ============================================================================
   LayersPopover (S-?, L4-32) — functional map-layer toggles (searchV2.layers.popover.js)
   ----------------------------------------------------------------------------
   A bottom-left "Layers" button on the map opens a small categorized popover (Mapbox-Studio-style
   layer panel) of overlay toggles: HuntScore heat (visibility + opacity), HLRBO Parcels, Food plots.
   The button is absolute inside the position:relative #search-v2-map (sits above Mapbox's own controls,
   z 2 — and just above the bottom-left ScaleControl); the popover shell reuses the .hlrbo-sv2-fp shadow
   pattern and is appended to <body>, positioned ABOVE the button by JS.
   ============================================================================ */

/* Bottom-left trigger. Lifted above the Mapbox ScaleControl (bottom-left) so the two don't collide. */
.hlrbo-sv2-lp-btn {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background: #fff;
    color: var(--sv2-primary-dark, #31420E);
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 20px;
    font: 700 13px var(--hlrbo-font, 'Figtree', sans-serif);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}
.hlrbo-sv2-lp-btn:hover { background: rgba(110, 136, 63, 0.06); }
/* Active (popover open) — dark-green fill, matching the design's hl-mapfloat.active. The popover module
   toggles aria-expanded on this button on open/close. */
.hlrbo-sv2-lp-btn[aria-expanded="true"] { background: var(--sv2-primary-dark, #31420E); color: #fff; border-color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-lp-btn[aria-expanded="true"]:hover { background: var(--sv2-green-active, #4D6029); }
.hlrbo-sv2-lp-btn-icon { font-size: 15px; line-height: 1; }
.hlrbo-sv2-lp-btn-text { line-height: 1; }

/* Popover shell — same shadow/border language as the AddFilterPopover (.hlrbo-sv2-fp). */
.hlrbo-sv2-lp {
    position: absolute;
    z-index: 1050;
    width: 300px;
    max-width: calc(100vw - 16px);
    max-height: 70vh;
    display: none;             /* open() sets display:flex */
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, sans-serif);
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-lp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sv2-border, #E0E0E0);
}
.hlrbo-sv2-lp-title { font-size: 14px; font-weight: 600; }
.hlrbo-sv2-lp-notice { font-size: 12px; color: var(--sv2-text-secondary, #666666); font-style: italic; margin: 0; padding: 4px 12px 8px; line-height: 1.45; }
.hlrbo-sv2-lp-close { border: none; background: transparent; font-size: 14px; color: var(--sv2-text-secondary, #666); cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.hlrbo-sv2-lp-close:hover { color: var(--sv2-text, #1A1A1A); }

.hlrbo-sv2-lp-list { overflow-y: auto; flex: 1 1 auto; }
.hlrbo-sv2-lp-section { border-bottom: 1px solid var(--sv2-divider, #F0F0EE); }
.hlrbo-sv2-lp-secbtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    background: #fff;
    border: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-lp-secbtn:hover { background: #FAF8F4; }
.hlrbo-sv2-lp-chev { width: 12px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-lp-seclabel { flex: 1 1 auto; }
/* Land IQ brand mark — right-aligned badge on the Intelligence Layers section header.
   66×22 keeps the mark's aspect ratio and avoids the auto-width overflow that clips the wordmark. */
.hlrbo-sv2-lp-liqmark { flex: 0 0 auto; line-height: 0; }
.hlrbo-sv2-lp-liqmark svg { display: block; height: 22px; width: 100px; }

.hlrbo-sv2-lp-body { padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 4px; }

/* Label-wrapped checkbox rows — the whole 44px row is the touch target. */
.hlrbo-sv2-lp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
    cursor: pointer;
}
.hlrbo-sv2-lp-check { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.hlrbo-sv2-lp-rowlabel { flex: 1 1 auto; }

/* HuntScore opacity slider (under the HuntScore toggle). */
.hlrbo-sv2-lp-slider { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px 26px; }
.hlrbo-sv2-lp-slider-head { display: flex; align-items: center; justify-content: space-between; }
.hlrbo-sv2-lp-slider-label { font-size: 12px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-lp-slider-pct { font-size: 12px; font-weight: 600; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-lp-range { width: 100%; min-height: 24px; accent-color: var(--sv2-primary, #6E883F); cursor: pointer; }
/* LandIQ description paragraph + learn-more link (#9632) */
.hlrbo-sv2-lp-rowdesc { margin: 0 0 6px 26px; font-size: 12px; color: var(--sv2-text-secondary, #666); line-height: 1.4; }
.hlrbo-sv2-lp-rowdesc-link { color: var(--sv2-primary, #6E883F); text-decoration: underline; }

/* Mobile (<768px): keep the popover above the button with thumb clearance; cap height + scroll. */
@media (max-width: 767px) {
    .hlrbo-sv2-lp { width: 280px; max-height: 60vh; overflow-y: auto; }
    .hlrbo-sv2-lp-btn { bottom: 40px; }
    /* Lift the cap-note above the bottom-left Layers button so a long "showing first N of M" note can't
       collide with it on a narrow phone (both are z-index:5). */
    .hlrbo-sv2-map-capnote { bottom: 92px; }
}

/* ============================================================================
   MIL-2.8: Deer Density legend card (S3)
   ----------------------------------------------------------------------------
   Floating white card, bottom-left ABOVE the Layers button + Mapbox attribution.
   Z-index 5 matches the Layers button tier (both float above the Mapbox chrome).
   Visible only while the Deer Density overlay is toggled on (controlled by JS).
   ============================================================================ */
.hlrbo-sv2-deer-legend {
    position: absolute;
    /* bottom: sits above the Layers button (bottom:16px + 36px height + 8px gap = 60px)
       so the two never overlap. Mapbox attribution is at bottom-right so no conflict. */
    bottom: 60px;
    left: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: var(--sv2-card-radius, 12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    font-family: var(--hlrbo-font, 'Figtree', sans-serif);
}

/* 5-stop swatch bar — evenly fills the card width */
.hlrbo-sv2-deer-legend__bar {
    display: flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    height: 10px;
    width: 120px;
}
.hlrbo-sv2-deer-legend__swatch {
    flex: 1 1 0;
    display: block;
}

/* 12px/400 Figtree caption per SRD §8.3 S3 */
.hlrbo-sv2-deer-legend__caption {
    font-size: 12px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
    white-space: nowrap;
    line-height: 1.3;
}

/* No-data indicator row — AC-5.2 (SRD §8.3 S3): neutral swatch + "No data" label */
.hlrbo-sv2-deer-legend__nodata {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Neutral/transparent swatch using design-system border token */
.hlrbo-sv2-deer-legend__nodata-swatch {
    display: inline-block;
    width: 12px;
    height: 10px;
    background: #FFFFFF;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 12px Figtree subdued label (#666666) — matches caption size/weight */
.hlrbo-sv2-deer-legend__nodata-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
    white-space: nowrap;
    line-height: 1.3;
}

/* Mobile (≤768px): collapse to swatch bar only — caption and no-data note hidden */
@media (max-width: 767px) {
    /* Lift to clear the raised Layers button (bottom:40px) + 36px height + 8px gap = 84px */
    .hlrbo-sv2-deer-legend { bottom: 84px; }
    .hlrbo-sv2-deer-legend__caption { display: none; }
    .hlrbo-sv2-deer-legend__nodata { display: none; }
}

/* ============================================================================
   Map pins + LandScore flyout (mockup match)
   ----------------------------------------------------------------------------
   HTML markers (searchV2.layers.js builds these as Mapbox GL Markers, default center
   anchor): a white rounded marker with a green species glyph, an optional orange play
   badge (.has-video), and a price·acres pill that surfaces on hover / when active.
   Plus two DetailDrawer sections (searchV2.drawer.js): the LandScore block (big total +
   sub-factors) and the land-cover breakdown (labelled % bars, colours set inline by JS).
   Reuses the --sv2-* tokens defined at the top of this file; honours reduced motion and
   keeps a >=44px touch target on phones.
   ============================================================================ */

/* ---- Map pins (HTML markers) ---- */
.hlrbo-sv2-pin {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sv2-accent, #DC7001);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hlrbo-sv2-pin:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
/* Active (the pin whose detail drawer is open) — white ring + orange glow, matches the selected card. */
.hlrbo-sv2-pin--active {
    box-shadow: 0 0 0 2px var(--sv2-accent, #DC7001), 0 6px 18px rgba(220, 112, 1, 0.30);
    z-index: 3;
}
/* Card-hover indicator — the pin for the result card under the cursor (desktop). Same glow language
   as --active, grown + raised above neighbors, with the price·acres pill revealed. */
.hlrbo-sv2-pin--cardhover {
    box-shadow: 0 0 0 2px var(--sv2-accent, #DC7001), 0 6px 18px rgba(220, 112, 1, 0.30);
    transform: translateY(-2px) scale(1.25);
    z-index: 4;
}
.hlrbo-sv2-pin--cardhover .hlrbo-sv2-pin-pill { opacity: 1; }

/* Solid orange dots — no species glyph. The icon element stays in the DOM for a11y/JS but renders nothing. */
.hlrbo-sv2-pin-icon { display: none; }

/* Play badge — bottom-right, overlapping the marker; only when .has-video. White on the orange dot. */
.hlrbo-sv2-pin-badge {
    display: none;
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 13px;
    height: 13px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--sv2-accent, #DC7001);
    border: 1.5px solid #fff;
    border-radius: 50%;
    font-size: 8px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.hlrbo-sv2-pin.has-video .hlrbo-sv2-pin-badge { display: inline-flex; }

/* LandKey pins carry the LandKey green instead of the default orange. A COLOR change rather than
   another corner badge: the bottom-right corner is already the play badge, a second overlay on a
   20px dot is unreadable, and colour is the one pin property that still reads at map zoom in a
   dense cluster. Keeps the white ring, so the --active / --cardhover orange glow still reads as
   selection on a green pin rather than being confused with it. */
.hlrbo-sv2-pin.has-landkey {
    background: var(--sv2-landkey, #5A7033);
    /* Bigger as well as greener. Colour alone is a weak signal in a cluster of dozens of pins at map
       zoom; size is the one that survives. 24 vs 20 reads as "this one matters" without crowding its
       neighbours. The badge's cream is deliberately NOT reused here — the map pane is a light warm
       ground (--sv2-map-bg), which a cream dot would sink straight into, the same trap the mid-green
       badge fell into on photographs. */
    width: 24px;
    height: 24px;
    border-color: var(--sv2-landkey-bg, #F3E9CE);
    z-index: 2;
}
/* Featured (paid boost) pins: the biggest dot on the map, in the deep accent, with a star, and
   stacked above every other pin (below only the hovered / active one). Declared after .has-landkey
   so a listing that is both reads as Featured. ::after carries the star because ::before is the
   phone hit-pad. */
.hlrbo-sv2-pin.has-boost {
    background: var(--sv2-featured, #B35A00);
    width: 28px;
    height: 28px;
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--sv2-badge, #C8962E), 0 3px 10px rgba(0, 0, 0, 0.32);
    z-index: 3;
}
.hlrbo-sv2-pin.has-boost::after {
    content: "\2605";
    color: #fff;
    font-size: 14px;
    line-height: 1;
}
/* Selection still has to read on a boosted pin: its own ring would otherwise override the
   --active / --cardhover glow (two classes beat one). */
.hlrbo-sv2-pin.has-boost.hlrbo-sv2-pin--active,
.hlrbo-sv2-pin.has-boost.hlrbo-sv2-pin--cardhover {
    box-shadow: 0 0 0 2px var(--sv2-accent, #DC7001), 0 6px 18px rgba(220, 112, 1, 0.30);
    z-index: 4;
}

/* The play badge sits ON the dot, so its glyph has to follow the dot's colour. */
.hlrbo-sv2-pin.has-landkey .hlrbo-sv2-pin-badge {
    color: var(--sv2-landkey, #5A7033);
    border-color: var(--sv2-landkey-bg, #F3E9CE);
    background: var(--sv2-landkey-bg, #F3E9CE);
}
/* After the LandKey badge rule on purpose: a boosted LandKey pin is orange, so its badge must be too. */
.hlrbo-sv2-pin.has-boost .hlrbo-sv2-pin-badge {
    color: var(--sv2-featured, #B35A00);
    border-color: #fff;
    background: #fff;
}
.hlrbo-sv2-pin-badge svg { display: block; }

/* Price·acres pill — floats above the marker; revealed on hover / active. */
.hlrbo-sv2-pin-pill {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 4;
    padding: 4px 9px;
    background: #fff;
    color: var(--sv2-text, #1A1A1A);
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
/* Small downward caret bridging the pill to the marker. */
.hlrbo-sv2-pin-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
}
.hlrbo-sv2-pin:hover .hlrbo-sv2-pin-pill,
.hlrbo-sv2-pin--active .hlrbo-sv2-pin-pill { opacity: 1; }

/* ---- DetailDrawer · LandScore (contract H/I): big total + sub-factor row ---- */
/* Land IQ score card (parcel-flyout redesign): white card, score ring + 5 category bars. */
.hlrbo-sv2-dw-landscore {
    margin: 0 16px;              /* side gutters: the parcel view appends this card straight to the panel */
    padding: 20px;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: var(--sv2-card-radius, 12px);
}
/* ── Top bar: brand mark + "Land IQ™" + species selector ── */
.hlrbo-sv2-dw-liq-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hlrbo-sv2-dw-liq-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
/* Official Land IQ logo lockup heading the card (replaces the old mark + "Land IQ™" wordmark). */
.hlrbo-sv2-dw-liq-logo { flex: 0 0 auto; line-height: 0; }
.hlrbo-sv2-dw-liq-logo svg { display: block; width: 168px; height: auto; }
.hlrbo-sv2-dw-liq-divider {
    height: 1px;
    background: var(--sv2-border, #E0E0E0);
    margin: 16px 0;
}

/* ── Score row: ring + qualitative band + subtitle ── */
.hlrbo-sv2-dw-liq-scorerow {
    display: flex;
    align-items: center;
    gap: 16px;
}
.hlrbo-sv2-dw-liq-ringwrap { flex: 0 0 auto; line-height: 0; }
.hlrbo-sv2-dw-liq-ring { display: block; }
.hlrbo-sv2-dw-liq-ring-track { stroke: var(--sv2-track, #ECEFE3); }
.hlrbo-sv2-dw-liq-ring-val   { stroke: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-dw-liq-ring-num {
    fill: var(--sv2-primary-dark, #31420E);
    font-family: var(--sv2-font, 'Figtree', sans-serif);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.hlrbo-sv2-dw-liq-scoretext { min-width: 0; flex: 1 1 auto; }
.hlrbo-sv2-dw-liq-band {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}
.hlrbo-sv2-dw-liq-band.is-good { color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-dw-liq-band.is-low  { color: var(--sv2-accent, #DC7001); }
/* "Coming soon" — non-whitetail species aren't scored yet: muted band + dimmed ring. */
.hlrbo-sv2-dw-liq-band.is-soon { color: var(--sv2-text-secondary, #666666); }
.hlrbo-sv2-dw-liq-ringwrap.is-soon { opacity: 0.45; }

/* Shared ring+title header layout — the Food Plot card still uses this (it reuses the Land IQ head). */
.hlrbo-sv2-dw-liq-head { display: flex; align-items: center; gap: 16px; }
.hlrbo-sv2-dw-liq-headtext { min-width: 0; flex: 1 1 auto; }
.hlrbo-sv2-dw-liq-titlerow { display: flex; align-items: center; gap: 8px; }

/* Species selector — re-weights the headline ring per animal. Pushed to the top-right of the top bar
   (a native <select> with appearance stripped + a CSS chevron), matching the design. */
.hlrbo-sv2-dw-liq-species {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}
.hlrbo-sv2-dw-liq-species::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--sv2-primary-dark, #31420E);
    border-bottom: 2px solid var(--sv2-primary-dark, #31420E);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.hlrbo-sv2-dw-liq-speciessel {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 40px;
    padding: 8px 32px 8px 14px;
    max-width: 160px;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 10px;
    font: 600 13.5px var(--hlrbo-font, 'Figtree', sans-serif);
    color: var(--sv2-primary-dark, #31420E);
    cursor: pointer;
    text-overflow: ellipsis;
}
.hlrbo-sv2-dw-liq-speciessel:hover { border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-dw-liq-speciessel:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }
.hlrbo-sv2-dw-liq-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-dw-liq-sub {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--sv2-text-secondary, #666);
}
/* ── Category grid: 2 columns, label+value row over a progress bar ── */
.hlrbo-sv2-dw-liq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-top: 18px;
}
.hlrbo-sv2-dw-liq-cat { min-width: 0; }
.hlrbo-sv2-dw-liq-catrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.hlrbo-sv2-dw-liq-catlabel { font-size: 15px; font-weight: 400; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-dw-liq-catval   { font-size: 16px; font-weight: 700; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-dw-liq-track {
    margin-top: 6px;
    height: 8px;
    border-radius: 999px;
    background: var(--sv2-track, #ECEFE3);
    overflow: hidden;
}
.hlrbo-sv2-dw-liq-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--sv2-primary, #6E883F);
    transition: width 0.3s ease;
}
/* Muted gold for sub-65 bars — matches the provided mockup. Note: this is NOT the design-system
   warning token (#FFC107, a brighter yellow); the mockup specifies this softer amber. Swap to
   var(--sv2-warning) if strict token alignment is preferred over mockup fidelity. */
.hlrbo-sv2-dw-liq-fill.is-amber { background: #E0A82E; }
@media (max-width: 360px) {
    .hlrbo-sv2-dw-liq-grid { grid-template-columns: 1fr; }
}

/* ---- DetailDrawer · land-cover (contract H/I): labelled % bars ---- */
.hlrbo-sv2-dw-landcover { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }  /* side gutters (parcel view has no padded wrapper) */
.hlrbo-sv2-dw-lc-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-dw-lc-row { display: flex; align-items: center; gap: 8px; }
.hlrbo-sv2-dw-lc-label { flex: 0 0 96px; font-size: 13px; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-dw-lc-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: var(--sv2-border, #E0E0E0);
    overflow: hidden;
}
/* width + background-color are set inline by searchV2.drawer.js (per the land-cover colour map). */
.hlrbo-sv2-dw-lc-fill { height: 100%; border-radius: 4px; }
.hlrbo-sv2-dw-lc-pct { flex: 0 0 40px; text-align: right; font-size: 12px; color: var(--sv2-text-secondary, #666); }

/* ---- DetailDrawer · Land IQ explainability (parcel flyout): "What is Land IQ?" + "Why this score?" ---- */
/* Both disclosures now live INSIDE the Land IQ card as divider-separated rows below the category grid. */
.hlrbo-sv2-dw-ls-explain,
.hlrbo-sv2-dw-why { margin: 0; border-top: 1px solid var(--sv2-border, #E0E0E0); }
.hlrbo-sv2-dw-ls-explain { margin-top: 18px; }   /* breathing room under the category grid */

.hlrbo-sv2-dw-ls-explain-sum,
.hlrbo-sv2-dw-why-sum {
    cursor: pointer;
    list-style: none;                 /* hide the native disclosure marker; we draw our own caret */
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;           /* design-system touch-target minimum (matches grab/share/close controls) */
    font-size: 13px;
    font-weight: 600;
    color: var(--sv2-primary-dark, #31420E);   /* dark green: AA-safe on white, still brand/interactive */
}
.hlrbo-sv2-dw-ls-explain-sum::-webkit-details-marker,
.hlrbo-sv2-dw-why-sum::-webkit-details-marker { display: none; }
.hlrbo-sv2-dw-ls-explain-sum::before,
.hlrbo-sv2-dw-why-sum::before {
    content: "\203A";                 /* › caret */
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s ease;
}
.hlrbo-sv2-dw-ls-explain[open] .hlrbo-sv2-dw-ls-explain-sum::before,
.hlrbo-sv2-dw-why[open] .hlrbo-sv2-dw-why-sum::before { transform: rotate(90deg); }
.hlrbo-sv2-dw-ls-explain-sum:focus-visible,
.hlrbo-sv2-dw-why-sum:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; border-radius: 4px; }

.hlrbo-sv2-dw-ls-explain-body {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sv2-text-secondary, #666);
}
.hlrbo-sv2-dw-ls-explain-link {
    display: inline-block;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sv2-primary, #6E883F);
    text-decoration: none;
}
.hlrbo-sv2-dw-ls-explain-link:hover { text-decoration: underline; }
.hlrbo-sv2-dw-ls-explain-link:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; border-radius: 4px; }

/* ---- DetailDrawer · Map tools (parcel flyout) — wrench icon button + "Map tools" popover ----
   The wrench sits in the header's top-right icon cluster, LEFT of the Save bookmark (mirrors its circle).
   Its popover lists the six tools (same set as the floating ToolStrip); picking one drives the shared
   HlrboSearchV2Tools facade. */
.hlrbo-sv2-parceltools {
    position: absolute;
    top: 12px;
    right: 116px;                /* leftmost of the cluster: close (16) + save (66) + 44 + 6 gap */
    z-index: 3;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 50%;
    background: #fff;
    color: var(--sv2-primary-dark, #31420E);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hlrbo-sv2-parceltools svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hlrbo-sv2-parceltools:hover,
.hlrbo-sv2-parceltools[aria-expanded="true"] { border-color: var(--sv2-primary, #6E883F); background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-parceltools:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 2px; }

/* "Map tools" popover — anchored below the icon cluster, right-aligned to the Save bookmark; overlays the
   sections below (absolute, so it doesn't push layout). */
.hlrbo-sv2-toolmenu {
    position: absolute;
    top: 64px;
    right: 16px;
    z-index: 20;
    width: 300px;
    max-width: calc(100% - 32px);
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.hlrbo-sv2-toolmenu[hidden] { display: none; }
.hlrbo-sv2-toolmenu-label {
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sv2-text-secondary, #666666);
}
.hlrbo-sv2-toolmenu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    background: none;
    border: 0;
    border-radius: 10px;
    font: 600 15px var(--hlrbo-font, 'Figtree', sans-serif);
    color: var(--sv2-text, #1A1A1A);
    text-align: left;
    cursor: pointer;
}
.hlrbo-sv2-toolmenu-item svg { flex: 0 0 auto; color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-toolmenu-itemlabel { white-space: nowrap; }
.hlrbo-sv2-toolmenu-item:hover { background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-toolmenu-item:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: -2px; }
.hlrbo-sv2-toolmenu-item.is-active,
.hlrbo-sv2-toolmenu-item.is-active svg { color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-toolmenu-sep { height: 1px; margin: 6px 12px; background: var(--sv2-border, #E0E0E0); }
/* "History" action — same hit-target as a tool item, but not a single-select radio */
.hlrbo-sv2-toolmenu-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    background: none;
    border: 0;
    border-radius: 10px;
    font: 600 15px var(--hlrbo-font, 'Figtree', sans-serif);
    color: var(--sv2-text, #1A1A1A);
    text-align: left;
    cursor: pointer;
}
.hlrbo-sv2-toolmenu-action svg { flex: 0 0 auto; color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-toolmenu-action:hover { background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-toolmenu-action:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: -2px; }

/* Map tools · Wind rose marker (searchV2.tooldraw.js) — arrow rotated to the wind direction + a speed
   badge, placed at the parcel centroid. Non-interactive (the map underneath stays clickable for tools). */
.hlrbo-sv2-windrose {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.hlrbo-sv2-windrose-arrow {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 50%;
    color: var(--sv2-accent, #DC7001);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.hlrbo-sv2-windrose-arrow svg { fill: currentColor; }
.hlrbo-sv2-windrose-label {
    font: 700 12px var(--hlrbo-font, 'Figtree', sans-serif);
    color: var(--sv2-primary-dark, #31420E);
    background: #fff;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
.hlrbo-sv2-windrose-label span { color: var(--sv2-text-secondary, #666666); font-weight: 600; }

/* ---- Waypoint editor modal (searchV2.waypoint.js) — Drop pin ---- */
.hlrbo-sv2-wp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
    font-family: var(--hlrbo-font, 'Figtree', sans-serif);
}
.hlrbo-sv2-wp {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.hlrbo-sv2-wp-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--sv2-text, #1A1A1A);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.hlrbo-sv2-wp-body {
    overflow-y: auto;
    padding: 22px 22px 8px;
}
.hlrbo-sv2-wp-label { display: block; font-size: 14px; color: var(--sv2-text-secondary, #666666); margin: 6px 0 6px; }
.hlrbo-sv2-wp-namewrap { display: flex; align-items: center; gap: 6px; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 8px; padding: 4px 8px 4px 12px; }
.hlrbo-sv2-wp-name { flex: 1 1 auto; min-width: 0; border: none; outline: none; font: 700 22px var(--hlrbo-font, 'Figtree', sans-serif); color: var(--sv2-text, #1A1A1A); background: transparent; }
.hlrbo-sv2-wp-nameclear { flex: 0 0 auto; width: 32px; height: 32px; border: none; background: transparent; color: var(--sv2-text-secondary, #666); font-size: 16px; cursor: pointer; }
.hlrbo-sv2-wp-section { margin: 22px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--sv2-border, #E0E0E0); font-size: 22px; font-weight: 700; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-wp-subhead { margin: 14px 0 10px; font-size: 16px; font-weight: 600; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-wp-typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; margin-top: 14px; }
.hlrbo-sv2-wp-type { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.hlrbo-sv2-wp-typeicon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #F2F3F0; border: 2px solid transparent; box-sizing: border-box; }
.hlrbo-sv2-wp-type.is-selected .hlrbo-sv2-wp-typeicon { background: #fff; border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-wp-typelabel { font-size: 12.5px; line-height: 1.2; text-align: center; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-wp-type.is-selected .hlrbo-sv2-wp-typelabel { color: var(--sv2-text, #1A1A1A); font-weight: 600; }

/* Custom waypoint map pins (HTML markers; tip anchored bottom-center).
   #12970: absolute, as Mapbox's .mapboxgl-marker declares. Where this sheet loads after mapbox-gl.css
   (listing page, Parcel Workspace), "relative" won, the pin became a full-width block, and Mapbox's
   translate(-50%) centred it on half the MAP width, drawing it far left of its saved point. */
.hlrbo-sv2-wp-pin { position: absolute; cursor: pointer; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.hlrbo-sv2-wp-pinlabel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; max-width: 140px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.92); color: #1A1A1A; font-size: 11px; line-height: 1.3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.hlrbo-sv2-wp-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 14px; margin-top: 16px; }
.hlrbo-sv2-wp-swatch { width: 56px; height: 56px; max-width: 100%; border-radius: 50%; border: none; cursor: pointer; padding: 0; }
.hlrbo-sv2-wp-swatch.is-light { border: 1px solid var(--sv2-border, #E0E0E0); }
.hlrbo-sv2-wp-swatch.is-selected { box-shadow: 0 0 0 3px #fff, 0 0 0 6px currentColor; }
.hlrbo-sv2-wp-notes { width: 100%; margin-top: 16px; padding: 12px; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 8px; font: 400 15px var(--hlrbo-font, 'Figtree', sans-serif); color: var(--sv2-text, #1A1A1A); resize: vertical; box-sizing: border-box; }
.hlrbo-sv2-wp-notes:focus-visible { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 1px; }
.hlrbo-sv2-wp-counter { margin-top: 6px; text-align: right; font-size: 13px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-wp-wind { display: flex; align-items: center; gap: 16px; margin: 22px 0 8px; padding: 16px; background: #F4F4F2; border-radius: 12px; }
.hlrbo-sv2-wp-wind-icon { flex: 0 0 auto; color: var(--sv2-text, #1A1A1A); line-height: 0; transition: transform 0.2s ease; }
.hlrbo-sv2-wp-wind-text { flex: 1 1 auto; min-width: 0; }
.hlrbo-sv2-wp-wind-title { font-size: 17px; font-weight: 700; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-wp-wind-sub { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-wp-wind-add { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--sv2-text-secondary, #888); border-radius: 50%; background: #fff; color: var(--sv2-text, #1A1A1A); font-size: 20px; line-height: 1; cursor: pointer; }
.hlrbo-sv2-wp-foot { flex: 0 0 auto; padding: 14px 22px 18px; border-top: 1px solid var(--sv2-border, #E0E0E0); background: #fff; }
.hlrbo-sv2-wp-save { display: block; width: 100%; min-height: 52px; border: none; border-radius: 10px; background: var(--sv2-primary, #6E883F); color: #fff; font: 700 17px var(--hlrbo-font, 'Figtree', sans-serif); cursor: pointer; }
.hlrbo-sv2-wp-save:hover { filter: brightness(0.96); }
.hlrbo-sv2-wp-delete { display: block; width: 100%; min-height: 52px; margin-top: 10px; border: none; border-radius: 10px; background: #ECECEC; color: var(--sv2-text, #1A1A1A); font: 700 17px var(--hlrbo-font, 'Figtree', sans-serif); cursor: pointer; }
.hlrbo-sv2-wp-delete:hover { background: #E2E2E2; }

/* ---- Annotation change-history modal (searchV2.annohistory.js) — Map tools "History" ----
   Reuses the waypoint modal's overlay/sheet/close (.hlrbo-sv2-wp-overlay/.hlrbo-sv2-wp/
   .hlrbo-sv2-wp-x — Bug #10357: this comment used to say "wp-close", a class defined
   nowhere, and annohistory.js copied it and shipped a raw close button). */
.hlrbo-sv2-ah { max-width: 420px; }
.hlrbo-sv2-ah-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--sv2-border, #E0E0E0); }
.hlrbo-sv2-ah-title { font: 700 20px var(--hlrbo-font, 'Figtree', sans-serif); color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-ah-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 14px; }
.hlrbo-sv2-ah-empty { padding: 22px 12px; color: var(--sv2-text-secondary, #666666); font-size: 14px; line-height: 1.5; text-align: center; }
.hlrbo-sv2-ah-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; }
.hlrbo-sv2-ah-row + .hlrbo-sv2-ah-row { border-top: 1px solid var(--sv2-border, #E0E0E0); }
.hlrbo-sv2-ah-row.is-current { background: var(--sv2-surface-muted, #F1F3EC); }
.hlrbo-sv2-ah-rowmain { flex: 1 1 auto; min-width: 0; }
.hlrbo-sv2-ah-rowsummary { display: flex; align-items: center; gap: 8px; font: 600 15px var(--hlrbo-font, 'Figtree', sans-serif); color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-ah-rowmeta { margin-top: 2px; font-size: 12.5px; color: var(--sv2-text-secondary, #666666); }
.hlrbo-sv2-ah-badge { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: var(--sv2-primary, #6E883F); color: #fff; font-size: 11px; font-weight: 700; }
.hlrbo-sv2-ah-restore { flex: 0 0 auto; min-height: 36px; padding: 0 16px; border: 1px solid var(--sv2-primary, #6E883F); border-radius: 8px; background: #fff; color: var(--sv2-primary, #6E883F); font: 700 14px var(--hlrbo-font, 'Figtree', sans-serif); cursor: pointer; }
.hlrbo-sv2-ah-restore:hover { background: var(--sv2-primary, #6E883F); color: #fff; }
.hlrbo-sv2-ah-restore:disabled { opacity: 0.6; cursor: default; }
/* Photos section */
.hlrbo-sv2-wp-photos { margin-top: 22px; }
.hlrbo-sv2-wp-sechead { display: flex; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--sv2-border, #E0E0E0); }
.hlrbo-sv2-wp-section--inline { border-bottom: none; padding-bottom: 0; margin: 0; flex: 1 1 auto; }
.hlrbo-sv2-wp-addbtn { flex: 0 0 auto; border: none; background: transparent; color: var(--sv2-text, #1A1A1A); font: 700 16px var(--hlrbo-font, 'Figtree', sans-serif); cursor: pointer; }
.hlrbo-sv2-wp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hlrbo-sv2-wp-thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #F1F1F1; }
.hlrbo-sv2-wp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlrbo-sv2-wp-thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hlrbo-sv2-wp-thumb.is-uploading { display: flex; align-items: center; justify-content: center; }
.hlrbo-sv2-wp-thumb-spin { width: 22px; height: 22px; border: 3px solid #D7D7D7; border-top-color: var(--sv2-primary, #6E883F); border-radius: 50%; animation: hlrbo-sv2-wp-spin 0.8s linear infinite; }
@keyframes hlrbo-sv2-wp-spin { to { transform: rotate(360deg); } }
.hlrbo-sv2-wp-photoerr { margin-top: 8px; font-size: 13px; color: var(--sv2-danger, #DC3545); }
/* Folders section */
.hlrbo-sv2-wp-folders { margin-top: 22px; }
.hlrbo-sv2-wp-folderchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hlrbo-sv2-wp-folderchip { padding: 8px 14px; min-height: 38px; border: 1px solid var(--sv2-border, #E0E0E0); border-radius: 19px; background: #fff; font: 600 13.5px var(--hlrbo-font, 'Figtree', sans-serif); color: var(--sv2-text, #1A1A1A); cursor: pointer; }
.hlrbo-sv2-wp-folderchip:hover { border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-wp-folderchip.is-selected { background: var(--sv2-primary, #6E883F); border-color: var(--sv2-primary, #6E883F); color: #fff; }
@media (max-width: 600px) {
    .hlrbo-sv2-wp-overlay { align-items: flex-end; padding: 0; }
    .hlrbo-sv2-wp { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
}

/* On-demand scoring (#click-to-score): the "Scoring this parcel…" placeholder + its fallback note,
   shown in the score slot (16px gutter matching the other parcel-view sections). */
.hlrbo-sv2-dw-ls-pending {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 16px 0;
    font-size: 13px;
    color: var(--sv2-text-secondary, #666);
}
.hlrbo-sv2-dw-ls-pending-spin {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid var(--sv2-border, #E0E0E0);
    border-top-color: var(--sv2-primary, #6E883F);
    border-radius: 50%;
    animation: hlrbo-sv2-ls-spin 0.7s linear infinite;
}
@keyframes hlrbo-sv2-ls-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hlrbo-sv2-dw-ls-pending-spin { animation: none; }
}
.hlrbo-sv2-dw-ls-unavail {
    margin: 10px 16px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sv2-text-secondary, #666);
}

.hlrbo-sv2-dw-why-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.hlrbo-sv2-dw-why-loading,
.hlrbo-sv2-dw-why-empty { margin: 0; font-size: 13px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-dw-why-group { display: flex; flex-direction: column; gap: 4px; }
.hlrbo-sv2-dw-why-grouptitle {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sv2-text-secondary, #666);
}
.hlrbo-sv2-dw-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hlrbo-sv2-dw-why-item {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-dw-why-item::before { position: absolute; left: 0; top: 2px; font-size: 10px; font-weight: 700; }
.hlrbo-sv2-dw-why-item--up::before { content: "\25B2"; color: var(--sv2-primary, #6E883F); }    /* ▲ positive driver */
.hlrbo-sv2-dw-why-item--down::before { content: "\25BC"; color: #A55401; }                       /* ▼ limiting (AA-safe orange) */
.hlrbo-sv2-dw-why-note { margin: 0; font-size: 12px; color: var(--sv2-text-secondary, #666); }
.hlrbo-sv2-dw-why-note--missing { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
    .hlrbo-sv2-pin { transition: none; }
    .hlrbo-sv2-pin-pill { transition: none; }
}

@media (max-width: 767px) {
    /* Pins stay tappable; the price pill is the affordance on tap (markers fire the open event). */
    .hlrbo-sv2-pin { width: 22px; height: 22px; }
    /* Expand the tap target to >=44px (WCAG 2.5.5 / CLAUDE.md) WITHOUT growing the visual marker —
       mirrors the .hlrbo-sv2-chip-x::before hit-pad pattern used elsewhere in this file. */
    .hlrbo-sv2-pin::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Drawer — Food Plot Potential card  (T6.1–T6.7, SRD-2026-FOODPLOT-001)
   Tokens: headings #1B1D17/#31420E, green #6E883F, orange #DC7001 (best-plot + CTA only),
   bg #FAF8F4, track #ECEFE3, sub-65 amber #E0A82E. Figtree 400/600/700 only.
   ──────────────────────────────────────────────────────────────────────────── */
.hlrbo-sv2-dw-foodplot {
    margin: 0 16px 14px;
    padding: 14px 16px;
    background: #FAF8F4;
    border: 0.5px solid var(--sv2-border, #E0E0E0);
    border-radius: 12px;
}
/* Sub-65 amber ring — scoped to food plot card ONLY (Land IQ card is unaffected).
   is-amber added to .hlrbo-sv2-dw-liq-ringwrap by buildFoodPlot when score < 65. */
.hlrbo-sv2-dw-foodplot .is-amber .hlrbo-sv2-dw-liq-ring-val { stroke: #E0A82E; }

/* Coverage-gap state (M-DEGRADE, T6.4): compact note — no ring, no 0, no spinner */
.hlrbo-sv2-dw-foodplot-gap {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sv2-text-secondary, #666666);
}
/* Tier pill (T6.2): always beside the ring number — not color-only */
.hlrbo-sv2-dw-foodplot-tier {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--sv2-track, #ECEFE3);
    color: var(--sv2-primary-dark, #31420E);
    white-space: nowrap;
    min-height: 20px;
}
/* Best-plot line (T6.2): "Best plot: ~0.6 ac upland · SW" */
.hlrbo-sv2-dw-foodplot-bestline {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
    line-height: 1.4;
}
/* Why-score expander body: rationale grid */
.hlrbo-sv2-dw-foodplot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 8px;
}
@media (max-width: 360px) {
    .hlrbo-sv2-dw-foodplot-grid { grid-template-columns: 1fr; }
}
.hlrbo-sv2-dw-foodplot-gridrow {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hlrbo-sv2-dw-foodplot-gridlabel {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sv2-text-secondary, #666666);
}
.hlrbo-sv2-dw-foodplot-gridval {
    font-size: 14px;
    font-weight: 400;
    color: var(--sv2-text, #1A1A1A);
}
/* Mandatory soil-test disclaimer (M-LEGAL, T6.3): muted italic, always present on expander open */
.hlrbo-sv2-dw-foodplot-disclaimer {
    margin: 6px 0 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    color: var(--sv2-text-secondary, #666666);
    border-top: 0.5px solid var(--sv2-border, #E0E0E0);
    padding-top: 6px;
}
/* "List your land" CTA (T6.7): orange CTA, only on unlisted parcels */
.hlrbo-sv2-dw-foodplot-cta-wrap {
    margin-top: 12px;
}
.hlrbo-sv2-dw-foodplot-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    padding: 10px 18px;
    background: #DC7001;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}
.hlrbo-sv2-dw-foodplot-cta:hover,
.hlrbo-sv2-dw-foodplot-cta:focus {
    background: #C25F00;
    color: #FFFFFF;
    text-decoration: none;
    outline-offset: 2px;
}
.hlrbo-sv2-dw-foodplot-cta:focus-visible {
    outline: 2px solid #DC7001;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Drawer — Terrain Features block  (§8.3 S3, SRD-HabitatRasterTerrain v1.1)
   Class names mirror searchV2.drawer.js buildTerrainSection / buildTerrainSummary.
   Token rules: Figtree (inherited), sizes 12/14/16, weights 400/600/700.
   Orange (accent) is reserved for parcel-fabric/selection — terrain chrome is neutral.
   ──────────────────────────────────────────────────────────────────────────── */
/* ---- DetailDrawer · "The land" card (parcel flyout): unifies Land cover + Terrain Features ---- */
.hlrbo-sv2-dw-theland {
    margin: 14px 16px;          /* top gap separates it from the Land IQ card above */
    padding: 14px 16px;
    border: 0.5px solid var(--sv2-border, #E0E0E0);
    border-radius: 12px;
}
.hlrbo-sv2-dw-theland-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sv2-text, #1A1A1A);
    margin-bottom: 12px;
}
/* nested: the card already pads, so drop land cover's standalone side gutter */
.hlrbo-sv2-dw-theland .hlrbo-sv2-dw-landcover { padding: 0; }
/* nested: the two sub-sections read as muted labels under the card title */
.hlrbo-sv2-dw-theland .hlrbo-sv2-dw-lc-title,
.hlrbo-sv2-dw-theland .hlrbo-sv2-dw-terrain-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sv2-text-secondary, #666666);
}

/* Land IQ category with no available data (e.g. Pressure on a parcel with no RegionalContext factors). */
.hlrbo-sv2-dw-liq-cat.is-empty .hlrbo-sv2-dw-liq-catlabel { color: var(--sv2-text-tertiary, #9A9A92); }
.hlrbo-sv2-dw-liq-cat.is-empty .hlrbo-sv2-dw-liq-catval {
    color: var(--sv2-text-tertiary, #9A9A92);
    font-size: 11px;
    font-weight: 400;
}
.hlrbo-sv2-dw-liq-cat.is-empty .hlrbo-sv2-dw-liq-track {
    background: #F4F4F1;
    border: 0.5px dashed #DADAD2;
}

.hlrbo-sv2-dw-terrain {
    margin: 14px 0 0;
    padding: 14px 0 0;        /* nested inside the "The land" card (which pads 16px); top border divides it from land cover */
    border-top: 0.5px solid var(--sv2-border, #E0E0E0);
}
.hlrbo-sv2-dw-terrain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.hlrbo-sv2-dw-terrain-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sv2-text, #1A1A1A);
    line-height: 1.3;
}
.hlrbo-sv2-dw-terrain-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 4px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--sv2-text-secondary, #666666);
    /* 44px touch target via negative-margin hit expansion on mobile */
}
.hlrbo-sv2-dw-terrain-eye:hover { background: #F0F0F0; }
.hlrbo-sv2-dw-terrain-eye:focus-visible {
    outline: 2px solid var(--sv2-primary, #6E883F);
}
.hlrbo-sv2-dw-terrain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.hlrbo-sv2-dw-terrain-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: var(--sv2-bg, #F8F9FA);
    border: 1px solid var(--sv2-border, #E0E0E0);
    border-radius: 12px;
}
.hlrbo-sv2-dw-terrain-chip svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}
.hlrbo-sv2-dw-terrain-chip-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--sv2-text, #1A1A1A);
}
.hlrbo-sv2-dw-terrain-chip-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
}
.hlrbo-sv2-dw-terrain-disclaimer {
    font-size: 12px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
    line-height: 1.4;
    margin-top: 4px;
}
.hlrbo-sv2-dw-terrain-pending {
    font-size: 12px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
    padding: 4px 0;
}
.hlrbo-sv2-dw-terrain-guard {
    font-size: 12px;
    font-weight: 400;
    color: var(--sv2-text-secondary, #666666);
    padding: 4px 0;
}
@media (max-width: 520px) {
    .hlrbo-sv2-dw-terrain-eye {
        /* Expand touch target to 44px on mobile without changing visual size */
        margin: -6px -6px -6px 0;
        padding: 10px;
    }
}

/* ---- "Listed | All ground" toggle (pill) + results (off-platform ground HLRBO would pursue) ---- */
.hlrbo-sv2-om-toggle {
    display: inline-flex; align-items: center; gap: 2px; margin: 10px 12px; padding: 4px;
    background: #FFFFFF; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.hlrbo-sv2-om-seg {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border: none;
    border-radius: 999px; background: transparent; color: var(--sv2-text-secondary, #666666);
    font-family: var(--hlrbo-font, 'Figtree', sans-serif); font-size: 13px; font-weight: 600;
    line-height: 1; cursor: pointer; white-space: nowrap;
}
.hlrbo-sv2-om-seg.is-active { background: var(--sv2-primary-dark, #31420E); color: #FFFFFF; }
.hlrbo-sv2-om-count { font-weight: 700; }
.hlrbo-sv2-om-seg:not(.is-active) .hlrbo-sv2-om-count { color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-om-count:empty { display: none; }

/* Non-subscriber "All ground" gate — subscribe CTA in place of the paid parcel list. */
.hlrbo-sv2-om-upsell {
    margin: 4px 12px 16px; padding: 24px 20px; border: 0.5px solid var(--sv2-border, #E0E0E0);
    border-radius: 12px; background: #FFFFFF; text-align: center;
}
.hlrbo-sv2-om-upsell-icon { line-height: 1; margin-bottom: 10px; color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-om-upsell-icon .hlrbo-sv2-ag-lock { width: 26px; height: 26px; margin: 0 auto; }
.hlrbo-sv2-om-upsell-title { font-size: 16px; font-weight: 700; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-om-upsell-text {
    font-size: 13px; color: var(--sv2-text-secondary, #666666); line-height: 1.45; margin: 6px 0 16px;
}
.hlrbo-sv2-om-upsell-cta {
    display: inline-block; padding: 10px 22px; border-radius: 8px; background: var(--sv2-accent, #DC7001);
    color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none;
}
.hlrbo-sv2-om-upsell-cta:hover { background: #C56400; }

/* ── All Ground Gate — Variant B "blurred goods" (non-subscriber upsell) ────────────────────────
   The blurred listing cards fill the results panel full-bleed (no bordered box); the CTA overlays directly
   on top of them. Figtree 400/600/700 only. */
.hlrbo-sv2-ag-gate {
    position: relative; overflow: hidden; margin: 0;
    /* Fill the pane down to the bottom of the screen (matches the split/map-pane viewport height). */
    height: calc(100vh - var(--sv2-topbar-h, 82px) - var(--sv2-strip-h, 56px));
    text-align: center; font-family: var(--hlrbo-font, 'Figtree', sans-serif);
}
/* Card backdrop (real card classes via .hlrbo-sv2-results--list), blurred + inert. */
.hlrbo-sv2-ag-rows { filter: blur(6px); pointer-events: none; }
/* CTA overlay ON TOP of the blurred cards — a light scrim keeps the copy readable while the cards show
   through as a blurred tease. */
.hlrbo-sv2-ag-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 24px; box-sizing: border-box;
    background: rgba(250, 248, 244, 0.78);
}
.hlrbo-sv2-ag-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-bottom: 16px;
    border-radius: 999px; background: var(--sv2-primary-dark, #31420E); color: #FFFFFF;
    font-size: 12px; font-weight: 600;
}
.hlrbo-sv2-ag-lock { display: block; }
.hlrbo-sv2-ag-headline { font-size: 20px; font-weight: 700; color: var(--sv2-text, #1A1A1A); line-height: 1.3; }
.hlrbo-sv2-ag-subhead {
    font-size: 14px; font-weight: 400; color: var(--sv2-text-secondary, #666666);
    line-height: 1.6; margin: 8px 0 12px; max-width: 420px;
}
.hlrbo-sv2-ag-benefit {
    font-size: 13px; font-weight: 600; color: var(--sv2-primary-dark, #31420E);
    line-height: 1.5; margin: 0 0 18px; max-width: 420px;
}
.hlrbo-sv2-ag-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
    padding: 12px 24px; border-radius: 8px; background: var(--sv2-primary, #6E883F); color: #FFFFFF;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.hlrbo-sv2-ag-cta:hover, .hlrbo-sv2-ag-cta:focus { background: #5E7434; color: #FFFFFF; text-decoration: none; }
.hlrbo-sv2-ag-micro { font-size: 12px; color: var(--sv2-text-secondary, #666666); margin-top: 12px; }

/* Locked parcel flyout (non-subscriber): blurred fake Land IQ preview + subscribe CTA overlay. Reuses the
   All Ground Gate .hlrbo-sv2-ag-* pill/headline/subhead/benefit/cta styles for a consistent look. */
/* Fills the drawer (a flex column) so the blurred report + overlay reach the bottom — no white gap. */
.hlrbo-sv2-dw-locked { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 480px; }
/* Blurred full Land IQ report backdrop (real detail classes, fabricated data). Light blur so the score,
   category bars, and land cover are RECOGNIZABLE — the prospective subscriber can "kind of" read the data. */
.hlrbo-sv2-dw-locked-preview { filter: blur(3px); pointer-events: none; padding: 16px; }
.hlrbo-sv2-dw-locked-head { font-size: 15px; font-weight: 700; color: var(--sv2-text, #1A1A1A); margin: 4px 4px 12px; }
/* Gradient scrim: light at the top so the score card shows through clearly, densening behind the centered
   CTA copy so it stays readable. */
.hlrbo-sv2-dw-locked-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 24px; box-sizing: border-box;
    background: linear-gradient(to bottom,
        rgba(250, 248, 244, 0.25) 0%,
        rgba(250, 248, 244, 0.40) 18%,
        rgba(250, 248, 244, 0.82) 42%,
        rgba(250, 248, 244, 0.88) 100%);
}
/* Keep the close ✕ above the overlay scrim. */
.hlrbo-sv2-dw-locked .hlrbo-sv2-parcelclose { z-index: 1; }

.hlrbo-sv2-om-results { padding: 0 12px 12px; }
.hlrbo-sv2-om-intro, .hlrbo-sv2-om-msg { font-size: 12px; color: var(--sv2-text-secondary, #666666); line-height: 1.4; padding: 4px 2px 10px; }

.hlrbo-sv2-om-card {
    border: 0.5px solid var(--sv2-border, #E0E0E0); border-radius: 12px; margin-bottom: 12px;
    overflow: hidden; background: #FFFFFF;
}
.hlrbo-sv2-om-thumb { position: relative; width: 100%; height: 150px; background: var(--sv2-placeholder-bg, #E8EAE4); }
.hlrbo-sv2-om-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlrbo-sv2-om-thumb.is-empty::after {
    content: "No imagery"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--sv2-text-secondary, #666666); font-size: 12px;
}
.hlrbo-sv2-om-headrow { display: flex; align-items: center; gap: 12px; }
.hlrbo-sv2-om-headtext { min-width: 0; }
.hlrbo-sv2-om-top {
    position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.4px; color: #FFFFFF; background: var(--sv2-accent, #DC7001); padding: 3px 8px; border-radius: 10px;
}
.hlrbo-sv2-om-body { padding: 10px 12px 12px; }
.hlrbo-sv2-om-place { font-size: 15px; font-weight: 600; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-om-sub { font-size: 12px; color: var(--sv2-text-secondary, #666666); margin-top: 2px; }
.hlrbo-sv2-om-cta {
    margin-top: 10px; width: 100%; padding: 9px 12px; border: 0.5px solid var(--sv2-primary, #6E883F);
    border-radius: 8px; background: #FFFFFF; color: var(--sv2-primary-dark, #31420E); font-size: 13px;
    font-weight: 600; cursor: pointer;
}
.hlrbo-sv2-om-cta:hover { background: #F1F4EA; }
.hlrbo-sv2-om-cta.is-done { border-color: var(--sv2-border, #E0E0E0); color: var(--sv2-text-secondary, #666666); cursor: default; }
.hlrbo-sv2-om-cta:disabled { cursor: default; }

/* ══ "Every Parcel" subscription upgrade modal (searchV2.upgradeModal.js) ═══════════════════════════
   Ported from the design handoff (option 1b): green primary, orange for the offer CTA only. Figtree. */
@keyframes hlrbo-um-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hlrbo-um-overlay {
    position: fixed; inset: 0; z-index: 20000; display: flex; overflow-y: auto; padding: 24px;
    box-sizing: border-box; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
body.hlrbo-um-lock { overflow: hidden; }
.hlrbo-um-dialog {
    margin: auto; flex: none; width: min(640px, 94vw); border-radius: 16px; overflow: hidden;
    background: #FFFFFF; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); animation: hlrbo-um-rise 0.25s ease;
    color: #1A1A1A;
}
.hlrbo-um-dialog:focus { outline: none; }

/* Buttons */
.hlrbo-um-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: background 0.2s ease; text-decoration: none; }
.hlrbo-um-btn-primary { background: #6E883F; color: #fff; }
.hlrbo-um-btn-primary:hover { background: #5A7033; }
.hlrbo-um-btn-accent { background: #DC7001; color: #fff; }
.hlrbo-um-btn-accent:hover { background: #BB5F01; }
.hlrbo-um-btn-lg { padding: 14px 28px; font-size: 16px; }
.hlrbo-um-btn-block { width: 100%; }
.hlrbo-um-cta-xl { font-size: 20px; font-weight: 700; padding: 18px 28px; }
.hlrbo-um-textlink { background: transparent; border: 0; padding: 12px 0 0; font-family: inherit; font-size: 16px; font-weight: 600; color: #6E883F; cursor: pointer; }
.hlrbo-um-textlink:hover { color: #5A7033; }
.hlrbo-um-a { color: #6E883F; font-weight: 600; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   Zero-results "Recover or Pivot" (searchV2.zeroResults.js — design handoff 2a).
   Values from the handoff token sheet (hlrbo colors_and_type). */
.hlrbo-sv2-zr { display: block; }

/* Chips row — active chip (white/1px #E0E0E0/r20) + dashed undo chip */
.hlrbo-sv2-zr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.hlrbo-sv2-zr-chip { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 20px; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 600; color: #1A1A1A; }
.hlrbo-sv2-zr-chip-plus { font-size: 12px; font-weight: 700; color: #6E883F; cursor: default; }
.hlrbo-sv2-zr-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: #666666; cursor: pointer; padding: 0; transition: background .2s ease, color .2s ease; }
.hlrbo-sv2-zr-chip-x:hover { background: #F0F0F0; color: #1A1A1A; }
.hlrbo-sv2-zr-chip--removed { background: transparent; border: 1px dashed #CBD0C3; padding: 6px 12px; font-size: 13px; font-weight: 400; color: #999999; cursor: pointer; font-family: inherit; transition: border-color .2s ease, color .2s ease; }
.hlrbo-sv2-zr-chip--removed s { text-decoration: line-through; }
.hlrbo-sv2-zr-chip-undo { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-weight: 700; color: #6E883F; }
.hlrbo-sv2-zr-chip--removed:hover { border-color: #6E883F; color: #6E883F; }

/* Binding-filter banner */
.hlrbo-sv2-zr-banner { display: flex; align-items: center; gap: 14px; margin-top: 16px; background: #F7F9F5; border: 1px solid #DBE1CF; border-radius: 12px; padding: 13px 16px; }
.hlrbo-sv2-zr-banner-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #F0F2EB; }
.hlrbo-sv2-zr-banner-txt { flex: 1; min-width: 0; }
.hlrbo-sv2-zr-banner-title { font-size: 14px; font-weight: 700; color: #31420E; }
.hlrbo-sv2-zr-banner-sub { font-size: 13px; color: #666666; }
.hlrbo-sv2-zr-btn { flex: none; border: 1px solid #6E883F; border-radius: 8px; background: #FFFFFF; color: #31420E; font-family: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; cursor: pointer; text-decoration: none; transition: background .2s ease; }
.hlrbo-sv2-zr-btn:hover { background: #F7F9F5; }
.hlrbo-sv2-zr-btn--accent { border: 0; background: #DC7001; color: #FFFFFF; }
.hlrbo-sv2-zr-btn--accent:hover { background: #BB5F01; color: #FFFFFF; }
.hlrbo-sv2-zr-btn--primary { border: 0; background: #6E883F; color: #FFFFFF; }
.hlrbo-sv2-zr-btn--primary:hover { background: #5A7033; color: #FFFFFF; }

/* Count row + ground-bridge link */
.hlrbo-sv2-zr-countrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; font-size: 15px; color: #1A1A1A; }
.hlrbo-sv2-zr-countnote { font-size: 12.5px; color: #999999; }
.hlrbo-sv2-zr-bridge { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 4px 0; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #6E883F; cursor: pointer; }
.hlrbo-sv2-zr-bridge:hover { color: #5A7033; }

/* Near-miss cards — the STANDARD result card (buildCard) with a blocker tag appended into the
   body; the .hlrbo-sv2-zr-card rules below only style the stale-cache compact fallback. */
.hlrbo-sv2-zr-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hlrbo-sv2-zr-stack .hlrbo-sv2-card-cell { width: 100%; }
.hlrbo-sv2-card-body .hlrbo-sv2-zr-badges { margin-top: 8px; }
.hlrbo-sv2-zr-card { display: flex; gap: 14px; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 12px; padding: 12px; cursor: pointer; transition: box-shadow .2s ease; }
.hlrbo-sv2-zr-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }
.hlrbo-sv2-zr-thumb { flex: none; width: 128px; height: 94px; border-radius: 8px; overflow: hidden; background: #F0F2EB; }
.hlrbo-sv2-zr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hlrbo-sv2-zr-thumb.is-empty img { display: none; }
.hlrbo-sv2-zr-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hlrbo-sv2-zr-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hlrbo-sv2-zr-card-name { font-size: 15px; font-weight: 600; color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlrbo-sv2-zr-card-price { flex: none; font-size: 16px; font-weight: 700; color: #6E883F; }
.hlrbo-sv2-zr-card-per { font-size: 11px; font-weight: 400; color: #666666; }
.hlrbo-sv2-zr-card-meta { font-size: 13px; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlrbo-sv2-zr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.hlrbo-sv2-zr-badge { display: inline-flex; align-items: center; gap: 4px; background: #FBEEDC; border: 1px solid #F6DBBF; color: #A55401; border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }

/* Lease-alert card */
.hlrbo-sv2-zr-alert { display: flex; align-items: center; gap: 14px; margin-top: 14px; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 12px; padding: 12px 16px; }
/* Confirmed state — the one-click alert saved to the hunter's Lease Finder profile */
.hlrbo-sv2-zr-alert--ok { background: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.25); animation: hlrbo-sv2-zr-fadein .25s ease; }
.hlrbo-sv2-zr-alert-ok-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #28A745; color: #fff; }
.hlrbo-sv2-zr-alert-ok-text { flex: 1; font-size: 13.5px; font-weight: 600; color: #1E7E34; }
.hlrbo-sv2-zr-alert-ok-link { flex: none; font-size: 12.5px; font-weight: 700; color: #6E883F; text-decoration: none; }
.hlrbo-sv2-zr-alert-ok-link:hover { text-decoration: underline; }
@keyframes hlrbo-sv2-zr-fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hlrbo-sv2-zr-alert--ok { animation: none; } }

/* Skeleton rows while the relaxed queries resolve (HLRBO shimmer tokens) */
.hlrbo-sv2-zr-skel { cursor: default; }
.hlrbo-sv2-zr-skel .hlrbo-sv2-zr-thumb { background: #E0E0E0; animation: hlrbo-sv2-zr-pulse 1.2s ease-in-out infinite; }
.hlrbo-sv2-zr-skel-line { height: 12px; border-radius: 6px; background: #E0E0E0; margin-top: 10px; width: 70%; animation: hlrbo-sv2-zr-pulse 1.2s ease-in-out infinite; }
.hlrbo-sv2-zr-skel-line--short { width: 40%; }
@keyframes hlrbo-sv2-zr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .hlrbo-sv2-zr-skel .hlrbo-sv2-zr-thumb, .hlrbo-sv2-zr-skel-line { animation: none; } }

/* Floating map pill — bottom-center of the map pane */
.hlrbo-sv2-zr-mappill { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 0; border-radius: 9999px; padding: 11px 20px; font-family: inherit; font-size: 13px; font-weight: 700; color: #31420E; cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); white-space: nowrap; }
.hlrbo-sv2-zr-mappill:hover { background: #F7F9F5; }

/* Hero (offer + success) */
.hlrbo-um-hero { position: relative; height: 260px; background: linear-gradient(135deg, #3a4d16 0%, #1a2406 100%); }
.hlrbo-um-hero-parcels { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Real satellite hero (Mapbox Static image) — covers the SVG art when present; the art backstops
   token-less opens and image load failures (the img hides itself onerror). */
.hlrbo-um-hero-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hlrbo-um-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,36,6,0.55) 0%, rgba(26,36,6,0) 45%); }
.hlrbo-um-hero-logo { position: absolute; top: 18px; left: 20px; line-height: 0; }
.hlrbo-um-hero-logo img { display: block; height: 36px; width: auto; }
.hlrbo-um-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hlrbo-um-close:hover { background: rgba(0,0,0,0.5); }
.hlrbo-um-close.is-slim { position: static; background: rgba(255,255,255,0.12); }
.hlrbo-um-close.is-slim:hover { background: rgba(255,255,255,0.22); }
.hlrbo-um-herobadge { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); color: #fff; border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.hlrbo-um-herobadge.is-success { background: #28A745; }

/* Slim header (compare + checkout) */
.hlrbo-um-slim { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #31420E; }
.hlrbo-um-slim-logo { line-height: 0; }
.hlrbo-um-slim-logo img { display: block; height: 26px; width: auto; }

/* Body */
.hlrbo-um-body { display: flex; flex-direction: column; }
.hlrbo-um-offer { padding: 28px 40px 32px; align-items: center; text-align: center; }
.hlrbo-um-compare, .hlrbo-um-checkout { padding: 18px 24px 24px; }
.hlrbo-um-success { padding: 36px 28px 40px; align-items: center; justify-content: center; text-align: center; }

/* Offer */
.hlrbo-um-eyebrow { margin-bottom: 8px; font-size: 13px; color: #6E883F; }
.hlrbo-um-h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.12; margin: 0 0 10px; color: #1A1A1A; }
.hlrbo-um-sub { font-size: 18px; line-height: 1.5; color: #666666; margin: 0 0 22px; max-width: 500px; }
.hlrbo-um-benefits { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 0 0 24px; }
.hlrbo-um-benefit { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #1A1A1A; text-align: left; }
.hlrbo-um-benecheck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #6E883F; display: flex; align-items: center; justify-content: center; }
.hlrbo-um-priceRow { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.hlrbo-um-price-anchor { font-size: 22px; font-weight: 600; color: #999999; text-decoration: line-through; }
.hlrbo-um-price { font-size: 52px; font-weight: 700; letter-spacing: -0.5px; color: #1A1A1A; }
.hlrbo-um-price-suf { font-size: 18px; font-weight: 600; color: #666666; }
.hlrbo-um-promopill { display: inline-flex; align-items: center; gap: 6px; background: #F0F2EB; border: 1px solid #DDE3D0; border-radius: 20px; padding: 5px 13px; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: #4A5A2A; }
.hlrbo-um-perday { font-size: 15px; color: #666666; margin: 10px 0 24px; }
.hlrbo-um-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: #666666; }
.hlrbo-um-social { font-size: 14px; color: #666666; margin-top: 10px; }

/* Step header (compare + checkout) */
.hlrbo-um-stephead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hlrbo-um-steptitle { font-size: 20px; font-weight: 600; margin: 0; color: #1A1A1A; }
.hlrbo-um-spacer { width: 40px; }
.hlrbo-um-back { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: #6E883F; cursor: pointer; }
.hlrbo-um-back:hover { color: #5A7033; }

/* Plan selector */
.hlrbo-um-plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; padding-top: 8px; }
.hlrbo-um-plan { position: relative; text-align: left; font-family: inherit; cursor: pointer; border-radius: 12px; padding: 12px 10px 10px; border: 1px solid #E0E0E0; background: #fff; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.hlrbo-um-plan.is-selected { border-color: #6E883F; background: #F7F9F5; box-shadow: 0 0 0 3px rgba(110,136,63,0.15); }
.hlrbo-um-plan-tag { position: absolute; top: -9px; left: 8px; background: #DC7001; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 20px; padding: 2px 8px; white-space: nowrap; line-height: 1.3; }
.hlrbo-um-plan-top { display: flex; align-items: center; justify-content: space-between; }
.hlrbo-um-plan-name { font-size: 13px; font-weight: 700; color: #31420E; }
.hlrbo-um-plan-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #CCCCCC; background: #fff; box-sizing: border-box; }
.hlrbo-um-plan.is-selected .hlrbo-um-plan-dot { border-color: #6E883F; background: #6E883F; box-shadow: inset 0 0 0 3px #fff; }
.hlrbo-um-plan-price { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: #1A1A1A; margin-top: 4px; }
.hlrbo-um-plan-yr { font-size: 11px; font-weight: 600; color: #666666; }
.hlrbo-um-note { display: flex; align-items: flex-start; gap: 8px; background: #F0F2EB; border: 1px solid #DDE3D0; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; line-height: 1.5; color: #4A5A2A; }

/* Feature matrix */
.hlrbo-um-matrix { display: flex; flex-direction: column; margin-bottom: 16px; border: 1px solid #E0E0E0; border-radius: 12px; overflow: hidden; }
.hlrbo-um-mx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; }
.hlrbo-um-mx-label { font-size: 14px; line-height: 1.4; }
.hlrbo-um-mx-val { flex: none; display: flex; align-items: center; justify-content: center; min-width: 56px; }
.hlrbo-um-mx-yes { width: 18px; height: 18px; border-radius: 50%; background: #6E883F; display: flex; align-items: center; justify-content: center; }
.hlrbo-um-mx-text { font-size: 13px; font-weight: 600; color: #1A1A1A; white-space: nowrap; }

/* Checkout */
.hlrbo-um-summary { background: #F8F9FA; border: 1px solid #E0E0E0; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.hlrbo-um-os-row { display: flex; justify-content: space-between; font-size: 14px; color: #1A1A1A; }
.hlrbo-um-os-strong { font-weight: 600; }
.hlrbo-um-os-row.is-save { color: #28A745; margin-top: 6px; }
.hlrbo-um-os-row.is-save span:last-child { font-weight: 600; }
.hlrbo-um-os-divider { border-top: 1px solid #E0E0E0; margin: 10px 0; }
.hlrbo-um-os-due { font-size: 15px; font-weight: 700; }
.hlrbo-um-os-fine { font-size: 12px; color: #999999; margin-top: 6px; }
.hlrbo-um-express { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.hlrbo-um-apple { font-family: -apple-system, BlinkMacSystemFont, var(--hlrbo-font, 'Figtree', sans-serif); font-size: 15px; font-weight: 600; color: #fff; background: #000; border: 0; border-radius: 8px; padding: 12px 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hlrbo-um-apple:hover { background: #1A1A1A; }
.hlrbo-um-paypal { font-family: inherit; font-size: 15px; font-weight: 700; font-style: italic; color: #003087; background: #FFC439; border: 0; border-radius: 8px; padding: 12px 16px; cursor: pointer; }
.hlrbo-um-paypal:hover { background: #F2B838; }
.hlrbo-um-or { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hlrbo-um-or > span:first-child, .hlrbo-um-or > span:last-child { flex: 1; height: 1px; background: #E0E0E0; }
.hlrbo-um-or-txt { font-size: 12px; color: #999999; }
.hlrbo-um-form { display: flex; flex-direction: column; gap: 10px; }
.hlrbo-um-form3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.hlrbo-um-field { display: flex; flex-direction: column; gap: 4px; }
.hlrbo-um-field label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #666666; }
.hlrbo-um-input { font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid #E0E0E0; border-radius: 8px; outline: none; color: #1A1A1A; width: 100%; min-width: 0; box-sizing: border-box; }
.hlrbo-um-input::placeholder { color: #999999; }
.hlrbo-um-input:focus { border-color: #6E883F; box-shadow: 0 0 0 3px rgba(110,136,63,0.15); }
.hlrbo-um-help { font-size: 12px; line-height: 1.5; color: #999999; }
.hlrbo-um-consent { font-size: 12px; line-height: 1.5; color: #666666; margin: 16px 0 0; }

/* Success */
.hlrbo-um-successicon { width: 60px; height: 60px; border-radius: 50%; background: #F0F2EB; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.hlrbo-um-successtitle { font-size: 25px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; color: #1A1A1A; }
.hlrbo-um-successbody { font-size: 16px; line-height: 1.6; color: #666666; margin: 0 0 24px; max-width: 420px; }

@media (prefers-reduced-motion: reduce) {
    .hlrbo-um-dialog { animation-duration: 0.001ms; }
}
@media (max-width: 520px) {
    .hlrbo-um-offer { padding: 24px 20px 28px; }
    .hlrbo-um-h1 { font-size: 28px; }
    .hlrbo-um-sub, .hlrbo-um-benefit { font-size: 16px; }
    .hlrbo-um-price { font-size: 44px; }
}

/* ══ "Own this parcel?" owner lead capture (searchV2.ownerLead.js) ══════════════════════════════════
   Shared card rendered by the parcel flyout (subscriber footer + inside the locked overlay) and the
   All ground off-market cards. Unscoped (the drawer panel lives on <body>, outside #search-v2-root),
   so every color rides the token var() with its hex fallback. */
.hlrbo-sv2-ol {
    border: 0.5px solid var(--sv2-border, #E0E0E0); border-radius: 12px; background: #FFFFFF;
    padding: 14px 16px; margin: 12px 16px 16px; text-align: left;
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
/* Host-specific spacing: the off-market card body already pads, and the locked overlay centers its
   column — let the card stretch full-width there and drop the flyout margins. */
.hlrbo-sv2-om-body .hlrbo-sv2-ol { margin: 10px 0 0; padding: 12px; }
.hlrbo-sv2-dw-locked-overlay .hlrbo-sv2-ol { margin: 18px 0 0; width: 100%; max-width: 360px; box-shadow: 0 4px 14px rgba(26, 26, 26, 0.08); }
.hlrbo-sv2-ol-head { font-size: 15px; font-weight: 700; color: var(--sv2-text, #1A1A1A); }
.hlrbo-sv2-ol-sub { font-size: 12.5px; line-height: 1.45; color: var(--sv2-text-secondary, #666666); margin-top: 3px; }
.hlrbo-sv2-ol-open {
    display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 10px; padding: 10px 12px;
    border: 0.5px solid var(--sv2-primary, #6E883F); border-radius: 8px; background: #FFFFFF;
    color: var(--sv2-primary-dark, #31420E); font-size: 13px; font-weight: 600; cursor: pointer;
}
.hlrbo-sv2-ol-open:hover { background: #F1F4EA; }
.hlrbo-sv2-ol-form { display: block; margin-top: 10px; }
.hlrbo-sv2-ol-input {
    display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; margin-top: 8px;
    border: 0.5px solid var(--sv2-border, #E0E0E0); border-radius: 8px; background: #FFFFFF;
    color: var(--sv2-text, #1A1A1A); font-size: 14px;
    font-family: var(--hlrbo-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.hlrbo-sv2-ol-input::placeholder { color: var(--sv2-text-tertiary, #999999); }
.hlrbo-sv2-ol-input:focus { outline: 2px solid var(--sv2-primary, #6E883F); outline-offset: 1px; border-color: var(--sv2-primary, #6E883F); }
.hlrbo-sv2-ol-err { font-size: 12.5px; color: var(--hlrbo-danger, #DC3545); margin-top: 8px; }
.hlrbo-sv2-ol-submit {
    display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 10px; padding: 11px 12px;
    border: none; border-radius: 8px; background: var(--sv2-primary, #6E883F); color: #FFFFFF;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.hlrbo-sv2-ol-submit:hover { background: #5E7434; }
.hlrbo-sv2-ol-submit:disabled { background: var(--sv2-disabled-fg, #C2C6BA); cursor: default; }
.hlrbo-sv2-ol-micro { font-size: 11.5px; color: var(--sv2-text-tertiary, #999999); margin-top: 8px; }
.hlrbo-sv2-ol-done-title { font-size: 15px; font-weight: 700; color: var(--sv2-primary-dark, #31420E); }
.hlrbo-sv2-ol-done-text { font-size: 12.5px; line-height: 1.45; color: var(--sv2-text-secondary, #666666); margin-top: 3px; }

/* ── #12558: 44px touch-target floor for the Search V2 control bar on mobile ──────────────────────
   Measured at a real 375x812 mobile emulation: every control cleared 44px on WIDTH but fell short on
   HEIGHT — "+ Add filter" 32px, "Sort: Best match" 33px, "Run AI search" 34px, the three view-toggle
   buttons 36px each. Bug #12168 applied this same floor to the footer links and social icons but never
   reached this control bar, which is a far more used surface.

   Scoped to <=767px so the desktop density is untouched, and applied via min-height + inline-flex
   centering rather than extra padding so the visual box grows symmetrically without shifting the label.
   The chip rule deliberately targets the interactive chips only. */
@media (max-width: 767px) {
    .hlrbo-sv2-nl-go,
    .hlrbo-sv2-chip,
    .hlrbo-sv2-sort,
    .hlrbo-sv2-viewseg-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The view segment is three buttons in a row; each needs the width floor too. */
    .hlrbo-sv2-viewseg-btn {
        min-width: 44px;
    }
}