/* ─────────────────────────────────────────────────────────────────────────
   /towns — Lakes & Towns hub (map + tabbed directory). Clearwater Loon brand:
   every value comes from a --mlh-* token in brand.css (no literal hex, no
   rgba, no forced priority overrides). Bespoke class names (db-*, tx-pin,
   lk-pin, bz-pin, biz--*) are kept — the map + client-render JS emit them.
   Leaflet overrides win by specificity (prefixed with #db-map) + load order,
   so this sheet is linked AFTER leaflet.css.

   Category colours (business types, featured/listing pins) are driven by a
   --biz-c custom property set on .biz--<type> modifier classes below, all
   sourced from brand tokens. The brand palette has no teal/purple/gold, so
   boat_rental→glacier, photographer→night-line and featured/gold→warning are
   the closest brand-consistent stand-ins.
   ───────────────────────────────────────────────────────────────────────── */

/* Embed mode (?embed=1) — page is iframed inside admin lakes-towns.html.
   Hide the public chrome so only the map + directory show. ?admin=1 paints
   draft/pending badges on non-published items (data gating is server-side). */
body.lt-embed global-header,
body.lt-embed global-footer,
body.lt-embed lead-modal { display: none; }
body.lt-embed .db-shell  { padding-top: 0; }
.lt-admin-badge {
    display: inline-block; padding: 0.12rem 0.45rem;
    border-radius: 4px; font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.5px; text-transform: uppercase;
    margin-left: 0.4rem; vertical-align: middle;
}
.lt-admin-badge.draft    { background: var(--mlh-warning-bg); color: var(--mlh-warning); }
.lt-admin-badge.pending  { background: var(--mlh-info-bg); color: var(--mlh-info); }
.lt-admin-badge.archived { background: var(--mlh-ice); color: var(--mlh-muted); }
.lt-admin-badge.inactive { background: var(--mlh-ice); color: var(--mlh-muted); }

html, body { height: 100%; }
body { background: var(--mlh-canvas); overflow: hidden; }

/* Navbar is position:fixed — we read its height at runtime into --hh
   so the split pane can fill exactly the remaining viewport. */
:root { --hh: 76px; --tb: 68px; --sb: 76px; }

.db-shell {
    position: fixed;
    inset: var(--hh) 0 0 0;
    display: grid;
    grid-template-columns: var(--sb) minmax(0, 1fr);
    grid-template-rows: var(--tb) 1fr;
    background: var(--mlh-white);
}

/* ── Category colour tokens (business types + property pins) ──────────────
   Each modifier sets --biz-c; pins, legend dots, card/popup gradients and
   CTAs all read it. Sourced from brand tokens only. */
.biz--restaurant         { --biz-c: var(--mlh-danger); }
.biz--marina             { --biz-c: var(--mlh-blue); }
.biz--outdoor_recreation { --biz-c: var(--mlh-success); }
.biz--boat_rental        { --biz-c: var(--mlh-glacier); }
.biz--builder            { --biz-c: var(--mlh-warning); }
.biz--photographer       { --biz-c: var(--mlh-night-line); }
.biz--service            { --biz-c: var(--mlh-muted); }
.biz--other              { --biz-c: var(--mlh-warning); }
.biz--featured           { --biz-c: var(--mlh-warning); }
.biz--listing            { --biz-c: var(--mlh-blue); }

/* Left rail — Zillow-style icon column */
.db-sidebar {
    grid-row: 1 / -1;
    grid-column: 1;
    background: var(--mlh-white);
    border-right: 1px solid var(--mlh-line);
    z-index: 15;
    display: flex;
    flex-direction: column;
    padding: 5rem 0.35rem 1.5rem;
    gap: 2.5rem;
}
.db-side-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
    background: transparent; border: 0; cursor: pointer;
    color: var(--mlh-body);
    font-family: var(--mlh-font-body); font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.2px; line-height: 1.15; text-align: center;
    text-decoration: none;
    border-radius: 10px;
    transition: background var(--mlh-dur) var(--mlh-ease), color var(--mlh-dur) var(--mlh-ease);
}
.db-side-btn:hover { background: var(--mlh-ice); color: var(--mlh-heading); }
.db-side-btn.is-active { background: var(--mlh-ice); color: var(--mlh-blue); }
.db-side-btn.is-active svg { stroke: var(--mlh-blue); }
.db-side-foot {
    margin-top: auto;
    padding: 0.75rem 0.2rem;
    text-align: center;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px;
    color: var(--mlh-muted);
}
.db-side-foot a { color: var(--mlh-muted); text-decoration: none; line-height: 1.2; display: block; }
.db-side-foot a:hover { color: var(--mlh-blue); }
.db-side-btn svg {
    width: 22px; height: 22px;
    stroke: var(--mlh-body); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.db-side-btn:hover svg { stroke: var(--mlh-heading); }
.db-side-label { display: block; }

/* ── Toolbar ─────────────────────────────────────────────── */
.db-toolbar {
    grid-column: 2; grid-row: 1;
    display: flex; gap: 0.65rem; align-items: center;
    padding: 0.85rem 1.25rem;
    background: var(--mlh-white);
    border-bottom: 1px solid var(--mlh-line);
    z-index: 10;
    overflow-x: auto;
    white-space: nowrap;
}
.db-toolbar input, .db-toolbar select, .db-seg button {
    font-family: var(--mlh-font-body); font-size: 0.92rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--mlh-line); border-radius: 10px;
    background: var(--mlh-white); color: var(--mlh-heading); outline: none;
    transition: border-color var(--mlh-dur) var(--mlh-ease), box-shadow var(--mlh-dur) var(--mlh-ease), background var(--mlh-dur) var(--mlh-ease), color var(--mlh-dur) var(--mlh-ease);
}
.db-toolbar input:focus, .db-toolbar select:focus {
    border-color: var(--mlh-blue);
    box-shadow: 0 0 0 3px var(--mlh-sky);
}
/* Custom select chevron — kills the clunky native OS arrow so the
   dropdowns sit flush with the inputs and segmented pills. */
.db-toolbar select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6778' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 14px;
    cursor: pointer;
    font-weight: 600;
}
.db-toolbar select:hover { border-color: var(--mlh-line-strong); }
.db-toolbar select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6DF2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.db-toolbar input[type="search"] {
    flex: 1; min-width: 260px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 16px 16px;
    padding-left: 2.3rem;
}

/* Segmented toggle — All | Towns | Lakes */
.db-seg {
    display: inline-flex; padding: 3px;
    background: var(--mlh-ice); border: 1px solid var(--mlh-line);
    border-radius: 11px;
}
.db-seg button {
    border: 0; padding: 0.5rem 0.9rem;
    background: transparent; border-radius: 8px;
    font-weight: 700; font-size: 0.85rem; color: var(--mlh-body);
    cursor: pointer;
}
.db-seg button.is-active {
    background: var(--mlh-blue); color: var(--mlh-on-dark);
    box-shadow: var(--mlh-shadow-hover);
}
.db-seg button:not(.is-active):hover { color: var(--mlh-heading); background: var(--mlh-white); }

.db-count {
    margin-left: auto; font-size: 0.82rem; color: var(--mlh-body); font-weight: 700;
    padding-left: 0.5rem;
}

/* ── Split pane ──────────────────────────────────────────── */
.db-main {
    grid-column: 2; grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    min-height: 0;
}

.db-map-col {
    position: relative;
    background: var(--mlh-ice);
    border-right: 1px solid var(--mlh-line);
    min-width: 0;
}
#db-map { position: absolute; inset: 0; }
.db-map-legend {
    position: absolute; top: 14px; right: 14px; z-index: 500;
    background: var(--mlh-white);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 0.55rem 0.85rem; border-radius: 10px;
    box-shadow: var(--mlh-shadow-hover);
    display: flex; gap: 0.9rem; align-items: center;
    font-family: var(--mlh-font-body);
    font-size: 0.75rem; font-weight: 700; color: var(--mlh-heading);
}
.db-map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; vertical-align: -1px; }
.db-map-legend .dot.town { background: var(--mlh-blue); }
.db-map-legend .dot.lake { background: var(--mlh-success); }
.db-map-legend .dot.biz  { background: var(--mlh-warning); }
.db-map-legend .dot.biz-dot { background: var(--biz-c, var(--mlh-warning)); }

/* Hide the "Leaflet · OpenStreetMap · CARTO" credit strip everywhere — it
   visually competes with our legend. #db-map prefix beats Leaflet's own
   class-only rule on specificity, so no forced override is needed. */
#db-map .leaflet-control-attribution { display: none; }
#db-map .leaflet-control-zoom {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--mlh-shadow-hover);
}
#db-map .leaflet-control-zoom a {
    background: var(--mlh-white); color: var(--mlh-heading);
    border: 0;
    width: 36px; height: 36px;
    line-height: 36px;
    font-size: 18px; font-weight: 800;
}
#db-map .leaflet-control-zoom a + a { border-top: 1px solid var(--mlh-line); }
#db-map .leaflet-control-zoom a:hover { background: var(--mlh-canvas); }

/* Town pin — blue */
.tx-pin {
    width: 22px; height: 22px;
    background: var(--mlh-blue);
    border: 3px solid var(--mlh-white);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: var(--mlh-shadow-hover);
    transition: transform var(--mlh-dur) var(--mlh-ease);
}
.tx-pin::after { content: ''; display: block; width: 6px; height: 6px; background: var(--mlh-white); border-radius: 50%; margin: 5px auto; }
.tx-pin-wrap:hover .tx-pin,
.tx-pin-wrap.is-hot .tx-pin { transform: rotate(-45deg) scale(1.2); z-index: 900; }

/* Lake pin — green (distinct from the blue town pins on the map) */
.lk-pin {
    width: 22px; height: 22px;
    background: var(--mlh-success);
    border: 3px solid var(--mlh-white);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: var(--mlh-shadow-hover);
    transition: transform var(--mlh-dur) var(--mlh-ease);
}
.lk-pin::after { content: ''; display: block; width: 6px; height: 6px; background: var(--mlh-white); border-radius: 50%; margin: 5px auto; }
.lk-pin-wrap:hover .lk-pin,
.lk-pin-wrap.is-hot .lk-pin { transform: rotate(-45deg) scale(1.2); z-index: 900; }

/* Business / property pin — colour set per category via the --biz-c custom
   property on the .biz--<type> class. Falls back to warning for unknowns. */
.bz-pin {
    width: 22px; height: 22px;
    background: var(--biz-c, var(--mlh-warning));
    border: 3px solid var(--mlh-white);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: var(--mlh-shadow-hover);
    transition: transform var(--mlh-dur) var(--mlh-ease);
}
.bz-pin::after { content: ''; display: block; width: 6px; height: 6px; background: var(--mlh-white); border-radius: 50%; margin: 5px auto; }
.bz-pin-wrap:hover .bz-pin,
.bz-pin-wrap.is-hot .bz-pin { transform: rotate(-45deg) scale(1.2); z-index: 900; }

/* Hover tooltip — just the name, minimal. #db-map prefix wins over Leaflet. */
#db-map .db-pin-tip {
    background: var(--mlh-midnight);
    color: var(--mlh-on-dark);
    border: 0;
    font-family: var(--mlh-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    box-shadow: var(--mlh-shadow-hover);
    white-space: nowrap;
}
#db-map .db-pin-tip::before { border-top-color: var(--mlh-midnight); }

/* Click popup — rich preview card with thumb + button. */
#db-map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--mlh-shadow-float); padding: 0; overflow: hidden; }
#db-map .leaflet-popup-content { margin: 0; width: 260px; font-family: var(--mlh-font-body); }
#db-map .leaflet-popup-tip { box-shadow: var(--mlh-shadow-hover); }
.db-pop-card .thumb { position: relative; height: 145px; background: linear-gradient(135deg, var(--mlh-blue), var(--mlh-blue-hover)); overflow: hidden; }
.db-pop-card.lake .thumb { background: linear-gradient(135deg, var(--mlh-blue), var(--mlh-blue-hover)); }
.db-pop-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-pop-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-pop-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--mlh-ice); color: var(--mlh-muted); font-size: 0.8rem; }
/* No-image placeholder — same gradient + initial as the lake/town hero
   and detail-page cards, so an entity looks identical everywhere. */
.db-pop-card .thumb.is-empty, .db-card-thumb.is-empty {
    background: linear-gradient(135deg, var(--mlh-ice), var(--mlh-sky), var(--mlh-glacier));
    display: flex; align-items: center; justify-content: center;
}
.ph-letter { font-size: 2.6rem; font-weight: 800; color: var(--mlh-glacier); line-height: 1; }
.db-pop-card .thumb .chip {
    position: absolute; top: 10px; left: 10px;
    background: var(--mlh-white);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    color: var(--mlh-heading); font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 0.25rem 0.55rem; border-radius: 5px;
}
.db-pop-body { padding: 0.85rem 1rem 1rem; }
.db-pop-body h4 { font-size: 1.05rem; font-weight: 800; color: var(--mlh-heading); margin: 0 0 0.25rem; letter-spacing: -0.25px; font-family: var(--mlh-font-display); }
.db-pop-body .meta { font-size: 0.74rem; color: var(--mlh-muted); margin: 0 0 0.85rem; font-weight: 600; }
.db-pop-btn { display: block; text-align: center; padding: 0.6rem 0.9rem; background: var(--mlh-blue); color: var(--mlh-on-dark); font-weight: 800; font-size: 0.82rem; border-radius: 8px; text-decoration: none; transition: background var(--mlh-dur) var(--mlh-ease); }
#db-map .db-pop-btn { color: var(--mlh-on-dark); }
.db-pop-btn:hover { background: var(--mlh-blue-hover); }
.db-pop-card.lake .db-pop-btn { background: var(--mlh-blue); }
.db-pop-card.lake .db-pop-btn:hover { background: var(--mlh-blue-hover); }
.db-pop-card.biz  .thumb {
    background: linear-gradient(135deg,
        var(--biz-c, var(--mlh-warning)) 0%,
        color-mix(in srgb, var(--biz-c, var(--mlh-warning)) 72%, var(--mlh-midnight)) 100%);
}
.db-pop-card.biz  .db-pop-btn { background: var(--biz-c, var(--mlh-warning)); }
.db-pop-card.biz  .db-pop-btn:hover {
    background: color-mix(in srgb, var(--biz-c, var(--mlh-warning)) 80%, var(--mlh-midnight));
}

/* ── Cards column ────────────────────────────────────────── */
.db-list-col {
    min-width: 0; min-height: 0;
    overflow-y: auto;
    background: var(--mlh-canvas);
    scroll-behavior: smooth;
}
.db-list-inner { padding: 1.25rem 1.25rem 3rem; }
.db-list-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 0 1rem; gap: 1rem;
}
.db-list-head h2 {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -0.4px;
    color: var(--mlh-heading); margin: 0; font-family: var(--mlh-font-display);
}
.db-list-head .sub { color: var(--mlh-muted); font-size: 0.85rem; font-weight: 600; }
.db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.db-card {
    display: flex; flex-direction: column;
    background: var(--mlh-white); border: 1px solid var(--mlh-line); border-radius: 14px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform var(--mlh-dur) var(--mlh-ease), border-color var(--mlh-dur) var(--mlh-ease), box-shadow var(--mlh-dur) var(--mlh-ease);
}
.db-card:hover,
.db-card.is-hot {
    transform: translateY(-3px);
    border-color: var(--mlh-line-strong);
    box-shadow: var(--mlh-shadow-float);
}
.db-card:hover .db-card-thumb img,
.db-card.is-hot .db-card-thumb img { transform: scale(1.05); }
.db-card-thumb {
    height: 165px;
    background: linear-gradient(135deg, var(--mlh-blue), var(--mlh-blue-hover));
    overflow: hidden; position: relative;
}
.db-card.lake .db-card-thumb {
    background: linear-gradient(135deg, var(--mlh-blue), var(--mlh-blue-hover));
}
/* Business cards inherit their per-type colour from the --biz-c custom
   property on the .biz--<type> class. color-mix gives the darker gradient
   stop without pre-computing every type's shade. */
.db-card.biz .db-card-thumb {
    background: linear-gradient(135deg,
        var(--biz-c, var(--mlh-warning)) 0%,
        color-mix(in srgb, var(--biz-c, var(--mlh-warning)) 72%, var(--mlh-midnight)) 100%);
}
.db-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--mlh-dur) var(--mlh-ease); }
.db-card-thumb .chip {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--mlh-white);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    color: var(--mlh-heading); font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 0.28rem 0.6rem; border-radius: 6px;
}
.db-card-thumb .type {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--mlh-blue);
    color: var(--mlh-on-dark); font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 0.28rem 0.55rem; border-radius: 6px;
}
.db-card.lake .db-card-thumb .type { background: var(--mlh-blue); }
.db-card.biz  .db-card-thumb .type { background: var(--biz-c, var(--mlh-warning)); }
.db-card-thumb .type .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mlh-white); }
.db-card-body { padding: 1rem 1.1rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.db-card-body h3 { font-size: 1.08rem; font-weight: 800; color: var(--mlh-heading); margin: 0 0 0.25rem; letter-spacing: -0.25px; font-family: var(--mlh-font-display); }
.db-card-body .loc { font-size: 0.78rem; color: var(--mlh-muted); margin: 0 0 0.7rem; font-weight: 600; }
.db-card-body p { color: var(--mlh-body); font-size: 0.87rem; line-height: 1.5; margin: 0 0 0.9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.db-card-cta {
    margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 800; color: var(--mlh-blue);
    transition: gap var(--mlh-dur) var(--mlh-ease), color var(--mlh-dur) var(--mlh-ease);
}
.db-card.lake .db-card-cta { color: var(--mlh-blue); }
.db-card.biz  .db-card-cta { color: var(--biz-c, var(--mlh-warning)); }
.db-card:hover .db-card-cta { gap: 0.6rem; }

/* Featured Partner badge — sits on the thumb, visually distinct from the type
   chip so premium businesses stand out. Brand has no gold, so warning tones
   stand in for the original amber/gold accent. */
.db-card.is-featured { border-color: var(--mlh-warning); box-shadow: var(--mlh-shadow-hover); }
.db-card-thumb .featured {
    position: absolute; bottom: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--mlh-warning);
    color: var(--mlh-on-dark); font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 0.3rem 0.65rem; border-radius: 6px;
    box-shadow: var(--mlh-shadow-hover);
}
.db-card-thumb .featured::before { content: '★'; font-size: 0.8rem; line-height: 1; }

.db-empty, .db-loading {
    grid-column: 1/-1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mlh-muted);
    font-size: 0.9rem;
}
/* Pan/zoom hides cards via a class toggle instead of re-rendering the DOM —
   otherwise images re-decode and the grid flickers. */
.db-card.is-hidden { display: none; }

/* Properties empty state — doubles as an agent-recruiting moment. */
.props-empty__emoji { font-size: 2.2rem; margin-bottom: 0.5rem; }
.props-empty__title { font-size: 1.35rem; font-weight: 800; color: var(--mlh-heading); margin: 0 0 0.5rem; font-family: var(--mlh-font-display); }
.props-empty__text { color: var(--mlh-body); line-height: 1.6; max-width: 460px; margin: 0 auto 1.5rem; }
.props-empty__cta { background: var(--mlh-ice); border: 1px solid var(--mlh-line); border-radius: 14px; padding: 1.5rem; max-width: 520px; margin: 0 auto; }
.props-empty__cta-title { font-weight: 800; color: var(--mlh-heading); margin-bottom: 0.35rem; }
.props-empty__cta-text { color: var(--mlh-body); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.1rem; }
.props-empty__cta-btns { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.props-empty__btn-primary { background: var(--mlh-blue); color: var(--mlh-on-dark); font-weight: 700; text-decoration: none; border-radius: 9px; padding: 0.65rem 1.2rem; }
.props-empty__btn-ghost { background: var(--mlh-white); color: var(--mlh-blue); font-weight: 700; text-decoration: none; border: 1px solid var(--mlh-line-strong); border-radius: 9px; padding: 0.65rem 1.2rem; }

/* Mobile-only UI chrome — view tabs replace the sidebar, Map/List toggle
   swaps between full-screen map and scrollable cards. Hidden on desktop. */
.db-mobile-tabs,
.db-mobile-mode { display: none; }

/* ── Mobile: map-or-list, not both at once ────────────────── */
@media (max-width: 900px) {
    body { overflow: auto; }
    .db-shell {
        position: static;
        inset: auto;
        display: block;
        padding-top: var(--hh);
    }
    .db-sidebar { display: none; }

    /* View tabs (Lakes & Towns ⇄ Businesses) + optional "Find an Agent"
       pill, replacing the hidden sidebar. */
    .db-mobile-tabs {
        display: flex; gap: 0.4rem;
        padding: 0.65rem 1rem 0.55rem;
        background: var(--mlh-white);
        border-bottom: 1px solid var(--mlh-line);
    }
    .db-mobile-tabs button,
    .db-mobile-tabs a {
        flex: 1;
        padding: 0.7rem 0.5rem;
        border: 1px solid var(--mlh-line);
        background: var(--mlh-white);
        font-family: var(--mlh-font-body); font-size: 0.82rem; font-weight: 800;
        color: var(--mlh-body);
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    }
    .db-mobile-tabs a { flex: 0 0 auto; padding: 0.7rem 0.85rem; }
    .db-mobile-tabs button.is-active {
        background: var(--mlh-blue); color: var(--mlh-on-dark); border-color: var(--mlh-blue);
        box-shadow: var(--mlh-shadow-hover);
    }

    .db-toolbar {
        height: auto; flex-wrap: wrap; gap: 0.5rem;
        padding: 0.65rem 1rem;
    }
    .db-toolbar input[type="search"] { flex: 1 1 100%; order: -1; min-width: 0; }
    .db-seg { order: 1; }
    .db-toolbar select { order: 2; flex: 1 1 auto; min-width: 0; }
    .db-count { order: 3; margin-left: auto; font-size: 0.75rem; }

    /* Map/List segmented toggle — sticky so it stays reachable whether the
       user is deep in the map or scrolled into cards. */
    .db-mobile-mode {
        display: inline-flex;
        position: fixed; left: 50%; bottom: 16px;
        transform: translateX(-50%);
        z-index: 900;
        background: var(--mlh-midnight);
        border-radius: 999px;
        padding: 4px;
        box-shadow: var(--mlh-shadow-float);
    }
    .db-mobile-mode button {
        border: 0; background: transparent;
        padding: 0.55rem 1.1rem;
        font-family: var(--mlh-font-body); font-size: 0.85rem; font-weight: 800;
        color: var(--mlh-on-dark); opacity: 0.65;
        border-radius: 999px;
        display: inline-flex; align-items: center; gap: 0.35rem;
        cursor: pointer;
    }
    .db-mobile-mode button svg { width: 14px; height: 14px; }
    .db-mobile-mode button.is-active {
        background: var(--mlh-white); color: var(--mlh-heading); opacity: 1;
    }

    .db-main { display: block; }
    /* Map col takes full remaining viewport in Map mode; list col takes
       natural flow in List mode. Each hides the other via the body class. */
    .db-map-col {
        height: calc(100vh - var(--hh) - 54px - 64px);
        border-right: 0; border-bottom: 1px solid var(--mlh-line);
        min-height: 340px;
    }
    body.is-map .db-list-col { display: none; }
    body.is-list .db-map-col { display: none; }

    .db-list-col { overflow: visible; }
    .db-list-inner { padding: 1.25rem 1rem 7rem; }
    .db-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; }
    .db-card-thumb { height: 150px; }
    /* Legend stays top-right but goes compact on mobile. */
    .db-map-legend {
        top: 12px; right: 12px; left: auto; bottom: auto;
        justify-content: flex-start;
        padding: 0.35rem 0.6rem;
        gap: 0.55rem;
        font-size: 0.68rem;
        border-radius: 8px;
    }
    .db-map-legend .dot { width: 8px; height: 8px; margin-right: 0.3rem; }

    /* Zoom controls sit above the sticky Map/List pill + safe area. */
    #db-map .leaflet-top.leaflet-left { top: 10px; left: 10px; }
    #db-map .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; }
}
@media (max-width: 480px) {
    .db-grid { grid-template-columns: 1fr; }
    .db-card-thumb { height: 170px; }
}