/* ── Parcl9 Land Comps — stylesheet ──────────────────────────────────────── */

/* Design tokens — matches the Parcl9 theme's warm parchment + gold palette
   exactly (see Theme/Parcl9/style.css :root, and the same convention used
   by parcl9-quick-proforma's .p9pf-wrap tokens). Values are hardcoded
   rather than reading the theme's --bg/--gold/etc. custom properties
   directly so this still renders correctly if the shortcode is ever used
   on a different theme. */
.p9lc-wrap {
    --p9lc-bg:            #f5f2eb;
    --p9lc-surface:       rgba(255, 255, 255, 0.55);
    --p9lc-surface-solid: #fdfbf6;
    --p9lc-surface2:      rgba(154, 111, 46, 0.05);
    --p9lc-border:        rgba(154, 111, 46, 0.18);
    --p9lc-border2:       rgba(154, 111, 46, 0.35);
    --p9lc-text:          #1a1814;
    --p9lc-text-muted:    #6b6458;
    --p9lc-accent:        #9a6f2e;
    --p9lc-accent-dark:   #b8883e;
    --p9lc-green:         #2e7d50;
    --p9lc-blue:          #4a6b8a;
    --p9lc-red:           #b03a2e;
    --p9lc-slate:         #948a72;
    --p9lc-radius:        4px;
    --p9lc-radius-sm:     3px;
    --p9lc-shadow:        0 4px 16px rgba(26, 24, 20, 0.08), 0 2px 6px rgba(26, 24, 20, 0.05);
    --p9lc-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --p9lc-font-serif:    var(--font-serif, 'Playfair Display', Georgia, 'Times New Roman', serif);

    font-family: var(--p9lc-font);
    font-weight: 300;
    color: var(--p9lc-text);
   /* max-width: 1400px;*/
    margin: 0 auto;
    box-sizing: border-box;
}

.p9lc-wrap *, .p9lc-wrap *::before, .p9lc-wrap *::after {
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.p9lc-header {
    margin-bottom: 24px;
}

.p9lc-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--p9lc-text);
    margin: 0 0 6px;
}

.p9lc-subtitle {
    font-size: 13px;
    font-weight: 300;
    color: var(--p9lc-text-muted);
    margin: 0 0 10px;
}

.p9lc-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(154, 111, 46, 0.1);
    border: 1px solid rgba(154, 111, 46, 0.3);
    color: var(--p9lc-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
/* --p9lc-col-w is set by initColumnResizer() in land-comps.js (and
   persisted to localStorage) once the user drags .p9lc-col-resizer — the
   middle column below IS that resizer, not a plain grid gap, so dragging
   it visually feels like resizing the gap itself. Mirrors
   parcel9-parcel-iq's .p9piq-two-col exactly (same default width, same
   drag mechanics) — the wider default (vs. the old fixed 320px) is what
   actually fixed the docked chat box feeling cramped: at 320px minus
   padding, its header/subtitle/buttons had ~280px to work with. */
.p9lc-layout {
    display: grid;
    grid-template-columns: var(--p9lc-col-w, 420px) 20px 1fr;
    column-gap: 6px;
    align-items: start;
}

@media ( max-width: 960px ) {
    .p9lc-layout { grid-template-columns: 1fr; }
    /* !important required: the base .p9lc-col-resizer rule below sets its
       own unconditional 'display: flex' with identical specificity (single
       class selector) and appears later in this file, so without it that
       rule silently wins the cascade on mobile too — same trap as the
       chat-input font-size bug fixed elsewhere in this file. There's also
       nothing to resize between once the layout above collapses to a
       single column, so the drag handle is functionally meaningless here
       anyway. */
    .p9lc-col-resizer { display: none !important; }
}

/* Draggable divider between the two panels — see initColumnResizer() in
   land-comps.js. The full grid column is the hit-area (easier to grab
   than a hairline), with a full-height dashed line down the middle and a
   vertical "drag to adjust" label breaking it partway down. */
.p9lc-col-resizer {
    align-self: stretch;
    min-height: 100%;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    position: relative;
}
.p9lc-col-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dashed var(--p9lc-border2);
    transition: border-color 0.15s ease;
}
.p9lc-col-resizer:hover::before,
.p9lc-col-resizer.is-dragging::before {
    border-color: var(--p9lc-accent);
}
.p9lc-col-resizer-label {
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p9lc-text-muted);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    /* Solid patch in the page's own background color, breaking the dashed
       line cleanly behind the label instead of text sitting on top of it. */
    background: var(--p9lc-bg);
    padding: 10px 1px;
    border-radius: var(--p9lc-radius-sm);
    transition: color 0.15s ease;
}
.p9lc-col-resizer:hover .p9lc-col-resizer-label,
.p9lc-col-resizer.is-dragging .p9lc-col-resizer-label {
    color: var(--p9lc-accent);
}

/* ── Controls sidebar ────────────────────────────────────────────────────── */
.p9lc-controls {
    background: var(--p9lc-surface);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 24px;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.p9lc-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p9lc-field-row {
    display: flex;
    gap: 10px;
}

.p9lc-field-group--half {
    flex: 1;
}

.p9lc-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p9lc-text-muted);
}

.p9lc-hint {
    font-size: 11px;
    font-weight: 300;
    color: var(--p9lc-text-muted);
    margin-top: 2px;
}

.p9lc-label-optional {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 300;
    color: var(--p9lc-text-muted);
    opacity: 0.75;
}

.p9lc-input {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    color: var(--p9lc-text);
    font-size: 14px;
    font-weight: 300;
    padding: 8px 10px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}

.p9lc-input:focus {
    border-color: var(--p9lc-border2);
}

.p9lc-input--short {
    width: 70px;
    text-align: center;
}

.p9lc-radius-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p9lc-slider {
    flex: 1;
    accent-color: var(--p9lc-accent);
    cursor: pointer;
}

.p9lc-unit {
    font-size: 12px;
    color: var(--p9lc-text-muted);
    white-space: nowrap;
}

.p9lc-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B6458' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    color: var(--p9lc-text);
    font-size: 13px;
    padding: 6px 28px 6px 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.p9lc-select::-ms-expand { display: none; }
.p9lc-select:hover { border-color: var(--p9lc-border2); background-color: rgba(255, 255, 255, 0.85); }
.p9lc-select:focus {
    outline: none;
    border-color: var(--p9lc-accent);
    box-shadow: 0 0 0 3px rgba(154, 111, 46, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239A6F2E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.p9lc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 300;
    color: var(--p9lc-text);
    cursor: pointer;
}

.p9lc-checkbox input { accent-color: var(--p9lc-accent); }

/* ── Advanced filters disclosure (land use / lot size / zoning match) ──────── */
.p9lc-adv-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p9lc-text-muted);
    cursor: pointer;
    transition: color 0.15s;
}

.p9lc-adv-toggle:hover,
.p9lc-adv-toggle.is-open {
    color: var(--p9lc-accent);
}

.p9lc-adv-toggle-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
}

.p9lc-adv-toggle.is-open .p9lc-adv-toggle-chevron {
    transform: rotate(90deg);
}

.p9lc-adv-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
}

/* Without this, the [hidden] attribute the JS toggles (see
   initAdvancedFilters()/openAdvancedFilters() in land-comps.js) has no
   effect — an author stylesheet's `display` always wins over the
   browser's built-in `[hidden] { display: none }` UA rule even when
   both have the same specificity, so .p9lc-adv-panel's own `display:
   flex` above was silently overriding it and leaving the panel
   permanently visible (the chevron still flipped since that's a
   separate class toggle, but the panel itself never actually opened
   or closed). */
.p9lc-adv-panel[hidden] {
    display: none;
}

.p9lc-adv-panel .p9lc-checkbox {
    margin-bottom: 4px;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.p9lc-tabs {
    display: flex;
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}

.p9lc-tab {
    flex: 1;
    background: var(--p9lc-surface2);
    border: none;
    color: var(--p9lc-text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 7px 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid var(--p9lc-border);
}

.p9lc-tab:last-child { border-right: none; }

.p9lc-tab:hover { background: rgba(154, 111, 46, 0.1); color: var(--p9lc-text); }

.p9lc-tab--active {
    background: var(--p9lc-accent);
    color: #fff;
    font-weight: 600;
}

.p9lc-tab-panel { display: none; }
.p9lc-tab-panel--active { display: flex; flex-direction: column; gap: 6px; }

/* ── Polygon mode ────────────────────────────────────────────────────────── */
.p9lc-polygon-guide {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    padding: 10px;
    font-size: 12px;
    color: var(--p9lc-text-muted);
    line-height: 1.5;
}

.p9lc-polygon-icon { font-size: 20px; flex-shrink: 0; color: var(--p9lc-accent); }

.p9lc-kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--p9lc-border);
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: monospace;
}

.p9lc-polygon-status {
    font-size: 12px;
    color: var(--p9lc-text-muted);
    padding: 4px 0;
}

.p9lc-polygon-status--ready { color: var(--p9lc-green); font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.p9lc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: var(--p9lc-radius-sm);
    cursor: pointer;
    padding: 9px 16px;
    transition: background 0.15s, opacity 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    /* Buttons are sometimes rendered as <a> (e.g. the teaser CTA) — reset
       theme/global link styles so they don't leak underlines or a link
       color that fights the button's own background. */
    text-decoration: none !important;
}

.p9lc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.p9lc-btn:active:not(:disabled) { transform: scale(0.98); }

/* !important on color: theme global styles targeting `a` (color, visited,
   hover states) tend to win on specificity/order against a plain class
   selector, which otherwise silently makes this text the same color as
   its own gold background (invisible button text). */
.p9lc-btn--primary,
.p9lc-btn--primary:visited {
    background: var(--p9lc-accent);
    color: #fff !important;
}
.p9lc-btn--primary:hover:not(:disabled) { background: var(--p9lc-accent-dark); }

/* The chat's "Run Search"/"Run Analysis" step used to share the same gold
   as "Apply to Form" (and every other primary button on the page), so the
   handoff between the two was easy to miss. Green reads as "go/execute"
   and is otherwise unused for buttons, so it's an unambiguous visual cue
   that this is the next, different action to take — not just a re-skin of
   Apply. Placed after .p9lc-btn--primary so it wins the (tied) specificity. */
.p9lc-btn--run,
.p9lc-btn--run:visited {
    background: var(--p9lc-green);
    color: #fff !important;
}
.p9lc-btn--run:hover:not(:disabled) { background: #256a43; }

.p9lc-btn--full { width: 100%; }

.p9lc-btn--ghost {
    background: rgba(255, 255, 255, 0.4);
    color: var(--p9lc-text-muted);
    border: 1px solid var(--p9lc-border);
}
.p9lc-btn--ghost:hover:not(:disabled) { background: rgba(154, 111, 46, 0.08); color: var(--p9lc-text); border-color: var(--p9lc-border2); }

/* AI actions use the same gold accent as the rest of the theme rather than
   a generic purple "AI" gradient — keeps the whole toolset visually
   consistent with Quick Proforma's gold-branded AI intake box. */
.p9lc-btn--ai,
.p9lc-btn--ai:visited {
    background: var(--p9lc-accent);
    color: #fff !important;
    font-size: 12px;
    padding: 6px 14px;
}
.p9lc-btn--ai:hover:not(:disabled) { background: var(--p9lc-accent-dark); }

.p9lc-btn--sm { font-size: 11px; padding: 5px 10px; }

/* Loading spinner inside button */
.p9lc-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: p9lc-spin 0.6s linear infinite;
}

/* .p9lc-btn-text stays visible while loading now — its content is swapped
   to a step-by-step status string (see setSearching()/tickSearchBtnStep()
   in land-comps.js, mirrors the chat's own green "Run Search" button)
   instead of being hidden behind a bare spinner with no detail. */
.p9lc-btn--loading .p9lc-btn-spinner { display: block; }

/* ── Saved-searches toolbar ("My Searches" / New Search / Rename) ─────────
   Mirrors parcel9-parcel-iq's .p9piq-toolbar block almost 1:1, restyled
   with Land Comps' own CSS custom properties. */
.p9lc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--p9lc-surface-solid);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    box-shadow: var(--p9lc-shadow);
    padding: 9px 12px;
    margin-bottom: 16px;
    position: relative;
}

.p9lc-toolbar-left,
.p9lc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.p9lc-saved-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(154, 111, 46, 0.14);
    color: var(--p9lc-accent);
    font-size: 11px;
    font-weight: 700;
}
.p9lc-saved-count:empty { display: none; }

/* Spins next to "My Searches" itself while loadSavedList()'s initial
   request is in flight (see land-comps.js) — visible feedback that the
   count badge/panel aren't just empty yet, without needing to open the
   panel to find out. Hidden the rest of the time (toggled via
   #p9lc-saved-toggle.is-loading), including while the badge/list already
   have real data to show. */
.p9lc-saved-toggle-spinner {
    display: none;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(154, 111, 46, 0.3);
    border-top-color: var(--p9lc-accent);
    border-radius: 50%;
    animation: p9lc-spin 0.7s linear infinite;
}
#p9lc-saved-toggle.is-loading .p9lc-saved-toggle-spinner { display: inline-block; }
#p9lc-saved-toggle.is-loading .p9lc-saved-count { display: none; }

.p9lc-saved-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--p9lc-surface-solid);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    box-shadow: var(--p9lc-shadow);
    z-index: 30;
}

.p9lc-saved-panel-head {
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p9lc-text-muted);
    border-bottom: 1px solid var(--p9lc-border);
}

.p9lc-saved-list { list-style: none; margin: 0; padding: 0; }

.p9lc-saved-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 12px;
    border-bottom: 1px solid var(--p9lc-border);
}
.p9lc-saved-item:last-child { border-bottom: none; }
.p9lc-saved-item.is-current { background: rgba(154, 111, 46, 0.08); }

.p9lc-saved-open {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.p9lc-saved-name {
    font-size: 12.5px;
    color: var(--p9lc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.p9lc-saved-date { font-size: 11px; color: var(--p9lc-text-muted); }

.p9lc-saved-rename,
.p9lc-saved-del {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: var(--p9lc-radius-sm);
    color: var(--p9lc-text-muted);
    cursor: pointer;
}
.p9lc-saved-rename:hover { background: rgba(154, 111, 46, 0.14); color: var(--p9lc-accent); }
.p9lc-saved-del:hover { background: rgba(176, 58, 46, 0.12); color: var(--p9lc-red); }

.p9lc-saved-empty {
    padding: 16px 12px;
    font-size: 12px;
    color: var(--p9lc-text-muted);
    text-align: center;
}

.p9lc-saved-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    font-size: 12px;
    color: var(--p9lc-text-muted);
    text-align: center;
}
.p9lc-saved-loading-spinner {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(154, 111, 46, 0.3);
    border-top-color: var(--p9lc-accent);
    border-radius: 50%;
    animation: p9lc-spin 0.7s linear infinite;
}

.p9lc-save-msg {
    font-size: 12px;
    font-weight: 600;
    min-height: 1em;
}

@media (max-width: 640px) {
    .p9lc-toolbar { flex-direction: column; align-items: stretch; }
    .p9lc-toolbar-right { flex-wrap: wrap; }
    .p9lc-saved-panel { left: 0; right: 0; width: auto; }
}

/* ── "From Pipeline" address picker (next to Subject Address) ─────────────
   Pulls a lead's address straight from parcel9-deal-pipeline — see
   P9LC_Ajax::handle_pipeline_deals(). */
.p9lc-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
}

.p9lc-pipeline-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--p9lc-accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.p9lc-pipeline-btn:hover { text-decoration: underline; }

.p9lc-pipeline-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 260px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--p9lc-surface-solid);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    box-shadow: var(--p9lc-shadow);
    z-index: 40;
}

.p9lc-pipeline-panel-head {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p9lc-text-muted);
    border-bottom: 1px solid var(--p9lc-border);
}

.p9lc-pipeline-list { list-style: none; margin: 0; padding: 0; }

.p9lc-pipeline-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--p9lc-border);
    padding: 8px 12px;
    cursor: pointer;
}
.p9lc-pipeline-item:last-child { border-bottom: none; }
.p9lc-pipeline-item:hover { background: rgba(154, 111, 46, 0.08); }

.p9lc-pipeline-item-addr {
    display: block;
    font-size: 12.5px;
    color: var(--p9lc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p9lc-pipeline-item-stage {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--p9lc-text-muted);
}

.p9lc-pipeline-empty {
    padding: 16px 12px;
    font-size: 12px;
    color: var(--p9lc-text-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .p9lc-pipeline-panel { right: auto; left: 0; width: 100%; }
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
.p9lc-map-container {
    position: relative;
    border-radius: var(--p9lc-radius);
    overflow: hidden;
    border: 1px solid var(--p9lc-border);
}

.p9lc-map {
    height: 460px;
    background: var(--p9lc-bg);
    z-index: 0;
}

.p9lc-map-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(253, 251, 246, 0.9);
    backdrop-filter: blur(4px);
    color: var(--p9lc-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 10px;
    pointer-events: none;
    border-top: 1px solid var(--p9lc-border);
}

/* ── Fullscreen button ────────────────────────────────────────────────────── */
.p9lc-fullscreen-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 800;
    background: rgba(253, 251, 246, 0.92);
    border: 1px solid var(--p9lc-border);
    color: var(--p9lc-text-muted);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    backdrop-filter: blur(4px);
    padding: 0;
}
.p9lc-fullscreen-btn:hover {
    background: rgba(154, 111, 46, 0.1);
    border-color: var(--p9lc-accent);
    color: var(--p9lc-accent);
}
.p9lc-fullscreen-btn--active {
    background: rgba(154, 111, 46, 0.15);
    border-color: var(--p9lc-accent);
    color: var(--p9lc-accent);
}

/* ── Fullscreen results / table mode ─────────────────────────────────────── */
.p9lc-results--fs {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9800 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto !important;
    padding: 24px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    background: var(--p9lc-bg) !important;
}

/* In table fullscreen, give the table wrap all remaining vertical space */
.p9lc-results--fs .p9lc-table-wrap {
    flex: 1 !important;
    overflow: auto !important;
    max-height: none !important;
}

.p9lc-results--fs .p9lc-table-header {
    position: sticky;
    top: 0;
    background: var(--p9lc-bg);
    padding-bottom: 12px;
    z-index: 2;
}

/* ── Fullscreen map mode (CSS class, not native Fullscreen API) ──────────── */
/* Using position:fixed is more reliable than requestFullscreen() for Leaflet */
.p9lc-map--fs {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9900 !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden !important;
    background: var(--p9lc-bg) !important;
}

.p9lc-map--fs #p9lc-map {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.p9lc-map--fs #p9lc-map-hint {
    display: none !important;
}

/* Fullscreen close button: move to top-right so it's out of Leaflet controls */
.p9lc-map--fs .p9lc-fullscreen-btn {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 9999 !important;
}

/* Draw toolbar theming in fullscreen */
.p9lc-map--fs .leaflet-draw-toolbar a,
.p9lc-map--fs .leaflet-draw-toolbar a:hover {
    background-color: rgba(253, 251, 246, 0.95) !important;
    border-color: var(--p9lc-border) !important;
    color: var(--p9lc-text) !important;
}
.p9lc-map--fs .leaflet-draw-toolbar a:hover {
    background-color: rgba(154, 111, 46, 0.12) !important;
    border-color: var(--p9lc-accent) !important;
}

/* Custom map pins */
.p9lc-subject-pin {
    background: var(--p9lc-accent);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(26, 24, 20, 0.35);
    border: 2px solid #fff;
}

.p9lc-comp-pin {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(26, 24, 20, 0.3);
    border: 1.5px solid #fff;
    cursor: pointer;
    transition: transform 0.1s;
}
.p9lc-comp-pin:hover { transform: scale(1.15); }

/* Cross-highlight between a table row and its map pin — see
   highlightComp() in land-comps.js. Kept visually distinct from :hover
   (which is transient) since this state persists until another comp is
   clicked. */
.p9lc-comp-pin--active {
    transform: scale(1.4);
    box-shadow: 0 0 0 4px rgba(154, 111, 46, 0.35), 0 2px 6px rgba(26, 24, 20, 0.4);
}

/* Leaflet popup override */
.p9lc-popup { font-size: 12px; line-height: 1.6; min-width: 200px; }
.p9lc-popup strong { display: block; margin-bottom: 2px; font-size: 13px; }

/* ── Results column ──────────────────────────────────────────────────────── */
/* min-width:0 is critical — CSS Grid children default to min-width:auto     */
/* which lets them overflow their grid cell rather than shrinking/scrolling. */
.p9lc-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    overflow: hidden;
}

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.p9lc-stats-bar {
    display: flex;
    gap: 0;
    background: var(--p9lc-surface);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    overflow: hidden;
}

.p9lc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-right: 1px solid var(--p9lc-border);
}

.p9lc-stat:last-child { border-right: none; }

.p9lc-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--p9lc-accent);
    white-space: nowrap;
}

.p9lc-stat-label {
    font-size: 10px;
    color: var(--p9lc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
    text-align: center;
}

@media ( max-width: 900px ) {
    .p9lc-stats-bar { flex-wrap: wrap; }
    .p9lc-stat { flex: 1 1 33%; border-bottom: 1px solid var(--p9lc-border); }
}

@media ( max-width: 600px ) {
    .p9lc-stat { flex: 1 1 50%; }
    .p9lc-stat-value { font-size: 15px; }
}

/* ── Source row ──────────────────────────────────────────────────────────── */
.p9lc-source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.p9lc-source-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
}

.p9lc-source-badge--attom    { background: rgba(74, 107, 138, 0.12); color: var(--p9lc-blue);   border: 1px solid rgba(74, 107, 138, 0.3); }
.p9lc-source-badge--regrid   { background: rgba(46, 125, 80, 0.1);  color: var(--p9lc-green);  border: 1px solid rgba(46, 125, 80, 0.3); }
.p9lc-source-badge--rentcast { background: rgba(154, 111, 46, 0.1); color: var(--p9lc-accent); border: 1px solid rgba(154, 111, 46, 0.3); }

.p9lc-source-note { color: var(--p9lc-text-muted); }

/* ── Bulk/subdivision sale disclosure ───────────────────────────────────────
   See P9LC_Comps::flag_bulk_sales() — same buyer + sale date as 1+ other
   comps in this result set, a signal the recorded price is likely the full
   multi-parcel transaction total rather than one parcel's true share. */
.p9lc-bulk-sale-note {
    font-size: 12px;
    color: var(--p9lc-accent);
    margin: -4px 0 4px;
}

.p9lc-bulk-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(154, 111, 46, 0.1);
    color: var(--p9lc-accent);
    border: 1px solid rgba(154, 111, 46, 0.3);
    cursor: help;
    vertical-align: middle;
}

/* Individual condo/apartment unit resale — see
   P9LC_Comps::is_unit_address(). Only ever appears when a user has
   explicitly opted into "Include individual unit/condo sales", since
   these are excluded from results entirely by default. Given its own
   hue (distinct from the amber Bulk Sale badge) so the two aren't
   visually confused despite sharing the same badge shape. */
.p9lc-unit-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(90, 90, 200, 0.1);
    color: #5a5ac8;
    border: 1px solid rgba(90, 90, 200, 0.3);
    cursor: help;
    vertical-align: middle;
}

.p9lc-drawer-section--warn {
    background: rgba(154, 111, 46, 0.06);
    border: 1px solid rgba(154, 111, 46, 0.25);
    border-radius: var(--p9lc-radius);
    padding: 10px 12px;
}

.p9lc-drawer-section--warn .p9lc-drawer-section-title { color: var(--p9lc-accent); }

/* ── AI summary ──────────────────────────────────────────────────────────── */
.p9lc-ai-section {
    background: var(--p9lc-surface);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    padding: 16px;
}

.p9lc-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--p9lc-text);
}

.p9lc-ai-icon { color: var(--p9lc-accent); font-size: 14px; }

.p9lc-ai-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.p9lc-ai-header-title { font-size: 13px; font-weight: 600; }

.p9lc-ai-header-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--p9lc-text-muted);
    white-space: normal;
}

.p9lc-ai-header .p9lc-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.p9lc-ai-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--p9lc-text-muted);
    padding: 4px 0;
}

.p9lc-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--p9lc-border);
    border-top-color: var(--p9lc-accent);
    border-radius: 50%;
    animation: p9lc-spin 0.7s linear infinite;
}

.p9lc-ai-output {
    font-size: 14px;
    line-height: 1.7;
    color: var(--p9lc-text);
    background: rgba(154, 111, 46, 0.06);
    border-left: 3px solid var(--p9lc-accent);
    padding: 12px 14px;
    border-radius: 0 var(--p9lc-radius-sm) var(--p9lc-radius-sm) 0;
}

/* AI-adjusted valuation card — shown above the narrative paragraph when
   Claude's reply parses as structured data (see claude_summary()/
   renderValuation()). */
.p9lc-valuation-card {
    background: var(--p9lc-surface-solid);
    border: 1px solid var(--p9lc-border2);
    border-radius: var(--p9lc-radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p9lc-valuation-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.p9lc-valuation-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p9lc-text-muted);
    margin-bottom: 2px;
}

.p9lc-valuation-ppsf {
    font-size: 15px;
    font-weight: 300;
    color: var(--p9lc-text);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.p9lc-valuation-ppsf strong {
    font-weight: 600;
    color: var(--p9lc-accent);
    font-size: 17px;
}

.p9lc-valuation-mid {
    color: var(--p9lc-text-muted);
    font-size: 13px;
}

.p9lc-confidence-badge {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.p9lc-confidence-badge--high   { background: rgba(46, 125, 80, 0.12);  color: var(--p9lc-green); border: 1px solid rgba(46, 125, 80, 0.3); }
.p9lc-confidence-badge--medium { background: rgba(154, 111, 46, 0.1); color: var(--p9lc-accent); border: 1px solid rgba(154, 111, 46, 0.3); }
.p9lc-confidence-badge--low    { background: rgba(176, 58, 46, 0.1);  color: var(--p9lc-red);   border: 1px solid rgba(176, 58, 46, 0.3); }

.p9lc-valuation-methodology {
    font-size: 12px;
    font-style: italic;
    color: var(--p9lc-text-muted);
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--p9lc-border);
}

/* ── Results section card ────────────────────────────────────────────────── */
.p9lc-results-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--p9lc-surface);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    padding: 20px;
    min-width: 0;
    overflow: hidden;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.p9lc-table-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.p9lc-table-title {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: var(--p9lc-text) !important;
    margin: 0 !important;
}

.p9lc-table-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
}

.p9lc-table-control-label {
    font-size: 12px;
    color: var(--p9lc-text-muted);
    white-space: nowrap;
    padding-left: 2px;
}

.p9lc-table-controls .p9lc-select { min-width: 150px; }

.p9lc-table-controls #p9lc-sort-dir {
    font-size: 13px;
    line-height: 1;
    padding: 6px 9px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--p9lc-border);
    border-radius: 0;
    margin-left: 2px;
}
.p9lc-table-controls #p9lc-sort-dir:hover:not(:disabled) {
    background: rgba(154, 111, 46, 0.1);
    color: var(--p9lc-accent);
}

.p9lc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--p9lc-border) !important;
    border-radius: var(--p9lc-radius);
    background: var(--p9lc-surface-solid);
}

/* Hard resets to win against WordPress theme table styles */
.p9lc-wrap .p9lc-table {
    width: 100% !important;
    min-width: 860px !important;     /* forces scroll before columns overlap */
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    table-layout: auto !important;
}

.p9lc-wrap .p9lc-table thead tr {
    background: var(--p9lc-surface2) !important;
    border-bottom: 1px solid var(--p9lc-border) !important;
}

.p9lc-wrap .p9lc-table th {
    padding: 10px 10px !important;
    text-align: left !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--p9lc-text-muted) !important;
    white-space: nowrap !important;
    background: var(--p9lc-surface2) !important;
    border: none !important;
    border-bottom: 1px solid var(--p9lc-border) !important;
    vertical-align: middle !important;
}

/* Clickable, sortable column headers — see initSortControls()/
   syncSortControls() in land-comps.js. */
.p9lc-wrap .p9lc-table th.p9lc-th-sortable {
    cursor: pointer !important;
    user-select: none !important;
}
.p9lc-wrap .p9lc-table th.p9lc-th-sortable:hover {
    color: var(--p9lc-text) !important;
}
.p9lc-wrap .p9lc-table th.p9lc-th-sortable--active {
    color: var(--p9lc-accent) !important;
}
.p9lc-sort-arrow {
    display: inline-block;
    min-width: 10px;
}

.p9lc-wrap .p9lc-table .p9lc-row {
    border-bottom: 1px solid var(--p9lc-border) !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    background: transparent !important;
}

.p9lc-wrap .p9lc-table .p9lc-row:last-child {
    border-bottom: none !important;
}

.p9lc-wrap .p9lc-table .p9lc-row:hover {
    background: rgba(154, 111, 46, 0.06) !important;
}

.p9lc-wrap .p9lc-table .p9lc-row:hover .p9lc-cell--address {
    color: var(--p9lc-accent) !important;
}

/* Cross-highlight from clicking this comp's map pin (or this row itself)
   — see highlightComp() in land-comps.js. Persists (unlike :hover) until
   another comp is clicked, so it's still visible after the mouse moves
   away to look at the map. */
.p9lc-wrap .p9lc-table .p9lc-row--active {
    background: rgba(154, 111, 46, 0.12) !important;
}
.p9lc-wrap .p9lc-table .p9lc-row--active .p9lc-cell--address {
    color: var(--p9lc-accent) !important;
    font-weight: 600;
}

.p9lc-wrap .p9lc-table .p9lc-cell {
    padding: 9px 10px !important;
    vertical-align: middle !important;
    color: var(--p9lc-text) !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 300 !important;
}

.p9lc-cell--address {
    max-width: 220px !important;
    transition: color 0.12s;
}

/* Relevance score chip — see P9LC_Comps::score_relevance() and
   relevance_badge() in land-comps.js. Circular like .p9lc-pin-num so the
   two leading columns read as a matched pair, but color-coded like
   .p9lc-confidence-badge so the tier is scannable without reading the
   number. */
.p9lc-cell--relevance {
    text-align: center !important;
}

.p9lc-relevance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    cursor: default;
}

.p9lc-relevance-badge--high   { background: rgba(46, 125, 80, 0.12);  color: var(--p9lc-green); border: 1px solid rgba(46, 125, 80, 0.3); }
.p9lc-relevance-badge--medium { background: rgba(154, 111, 46, 0.1); color: var(--p9lc-accent); border: 1px solid rgba(154, 111, 46, 0.3); }
.p9lc-relevance-badge--low    { background: rgba(176, 58, 46, 0.1);  color: var(--p9lc-red);   border: 1px solid rgba(176, 58, 46, 0.3); }

/* Explains an otherwise-bare "—" in Beds/Baths for confirmed multi-unit
   comps — see beds_baths_label() in land-comps.js. cursor:help signals
   the title tooltip has more context than the visible dash. */
.p9lc-dash-note { cursor: help; border-bottom: 1px dotted currentColor; }
.p9lc-dash-note em { font-style: italic; opacity: 0.75; }

/* Flags the Bldg Sqft cell as unit-level rather than whole-building for a
   comp flagged is_unit_sale — see the Bldg Sqft column render in
   land-comps.js. Same cursor:help convention as .p9lc-dash-note above. */
.p9lc-unit-sqft-note { cursor: help; font-size: 0.85em; opacity: 0.7; border-bottom: 1px dotted currentColor; }

/* Inner wrapper keeps pin number and address text side by side */
.p9lc-cell--address .p9lc-addr-inner {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}

.p9lc-cell--address .p9lc-addr-inner span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.p9lc-pin-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--p9lc-text-muted);
}

.p9lc-wrap .p9lc-table .p9lc-cell--price {
    font-weight: 600 !important;
    color: var(--p9lc-accent) !important;
}

.p9lc-wrap .p9lc-table .p9lc-cell--ppsf {
    font-weight: 500 !important;
    color: var(--p9lc-blue) !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.p9lc-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.p9lc-badge--developed { background: rgba(46, 125, 80, 0.1);    color: var(--p9lc-green);      border: 1px solid rgba(46, 125, 80, 0.3); }
.p9lc-badge--vacant    { background: rgba(154, 111, 46, 0.1);   color: var(--p9lc-accent);     border: 1px solid rgba(154, 111, 46, 0.3); }
.p9lc-badge--improved  { background: rgba(148, 138, 114, 0.14); color: var(--p9lc-slate);      border: 1px solid rgba(148, 138, 114, 0.3); }
.p9lc-badge--unknown   { background: rgba(107, 100, 88, 0.08);  color: var(--p9lc-text-muted); border: 1px solid var(--p9lc-border); }

/* Source chips */
.p9lc-source-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}
.p9lc-source-chip--attom    { background: rgba(74, 107, 138, 0.12); color: var(--p9lc-blue); }
.p9lc-source-chip--regrid   { background: rgba(46, 125, 80, 0.1);  color: var(--p9lc-green); }
.p9lc-source-chip--rentcast { background: rgba(154, 111, 46, 0.1); color: var(--p9lc-accent); }
.p9lc-source-chip--rapidapi_comps { background: rgba(154, 111, 46, 0.1); color: var(--p9lc-accent); }
.p9lc-source-chip--realestateapi  { background: rgba(74, 107, 138, 0.12); color: var(--p9lc-blue); }

/* Zoning tag */
.p9lc-zone {
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    font-family: monospace;
    color: var(--p9lc-text);
}

/* ── No-results ──────────────────────────────────────────────────────────── */
.p9lc-no-results {
    background: var(--p9lc-surface);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    padding: 32px;
    text-align: center;
    color: var(--p9lc-text-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ── Error / notice ──────────────────────────────────────────────────────── */
.p9lc-error {
    background: rgba(176, 58, 46, 0.08);
    border: 1px solid rgba(176, 58, 46, 0.3);
    color: var(--p9lc-red);
    font-size: 13px;
    border-radius: var(--p9lc-radius-sm);
    padding: 8px 12px;
}

/* Login/upgrade CTA appended to a gated (access_denied / frequency_limit)
   error message — see gateCta() in land-comps.js. */
.p9lc-error-link {
    color: var(--p9lc-accent);
    font-weight: 500;
    text-decoration: underline;
    margin-left: 4px;
    white-space: nowrap;
}
.p9lc-error-link:hover { color: var(--p9lc-accent-dark); }

.p9lc-notice--warn {
    background: rgba(154, 111, 46, 0.08);
    border: 1px solid rgba(154, 111, 46, 0.3);
    color: var(--p9lc-accent);
    font-size: 13px;
    border-radius: var(--p9lc-radius-sm);
    padding: 10px 14px;
}

/* ── Slide-in drawer ─────────────────────────────────────────────────────── */
.p9lc-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 20, 0.45);
    z-index: 9998;
}

.p9lc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 95vw;
    background: var(--p9lc-surface-solid);
    border-left: 1px solid var(--p9lc-border);
    z-index: 9999;
    overflow-y: auto;
    box-shadow: var(--p9lc-shadow);
    transition: transform 0.2s ease;
}

.p9lc-drawer[hidden] {
    display: block;
    transform: translateX(100%);
    pointer-events: none;
}

.p9lc-drawer:not([hidden]) {
    transform: translateX(0);
}

.p9lc-drawer-inner { padding: 24px; position: relative; }

.p9lc-drawer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    color: var(--p9lc-text-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.p9lc-drawer-close:hover { color: var(--p9lc-accent); background: rgba(154, 111, 46, 0.1); }

.p9lc-drawer-address {
    font-family: var(--p9lc-font-serif);
    font-size: 17px;
    font-weight: 400;
    color: var(--p9lc-text);
    margin-bottom: 10px;
    padding-right: 36px;
    line-height: 1.4;
}

.p9lc-drawer-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.p9lc-drawer-grid {
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.p9lc-dg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--p9lc-border);
    font-size: 13px;
}

.p9lc-dg-row:last-child { border-bottom: none; }

.p9lc-dg-label { color: var(--p9lc-text-muted); }
.p9lc-dg-val   { font-weight: 500; color: var(--p9lc-text); }
.p9lc-dg-val--highlight { color: var(--p9lc-accent); font-size: 16px; font-weight: 600; }

.p9lc-drawer-section {
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    padding: 14px;
    margin-bottom: 12px;
}

.p9lc-drawer-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p9lc-text-muted);
    margin-bottom: 8px;
}

.p9lc-drawer-note {
    font-size: 13px;
    font-weight: 300;
    color: var(--p9lc-text);
    line-height: 1.6;
    margin: 0 0 8px;
}

.p9lc-drawer-disclaimer {
    font-size: 11px;
    color: var(--p9lc-text-muted);
    display: block;
    margin-top: 4px;
    font-style: italic;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes p9lc-spin {
    to { transform: rotate(360deg); }
}

/* ── Leaflet popup theming ───────────────────────────────────────────────── */
#p9lc-map .leaflet-popup-content-wrapper {
    background: var(--p9lc-surface-solid);
    color: var(--p9lc-text);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    box-shadow: var(--p9lc-shadow);
}

#p9lc-map .leaflet-popup-tip {
    background: var(--p9lc-surface-solid);
}

#p9lc-map .leaflet-popup-content {
    margin: 10px 14px;
}

/* ── Results chat ────────────────────────────────────────────────────────── */
/* Docked in the sidebar by default; pops into a draggable/resizable
   floating window on first message (see openFloatingChat() in
   land-comps.js) — mirrors parcel9-parcel-iq's #p9piq-intake-box CSS
   (.p9piq-intake-box / --floating / .p9piq-resize-handle etc). */

.p9lc-chat-box {
    background: var(--p9lc-surface2);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 18px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.p9lc-chat-box--highlight {
    border-color: var(--p9lc-accent);
    box-shadow: 0 0 0 3px var(--p9lc-surface2), var(--p9lc-shadow);
}

.p9lc-chat-box--floating {
    position: fixed;
    top: 24px;
    left: 24px;
    bottom: auto;
    right: auto;
    width: 360px;
    min-width: 300px;
    max-width: calc(100vw - 24px);
    height: min(65vh, 540px);
    min-height: 300px;
    max-height: calc(100vh - 24px);
    /* No native `resize` — that only gives one bottom-right corner. All 4
       edges + 4 corners are handled by the .p9lc-resize-handle elements
       below, driven by initFloatingResize() in land-comps.js. */
    z-index: 9999;
    background: var(--p9lc-surface-solid);
    box-shadow: var(--p9lc-shadow);
    border-color: var(--p9lc-border2);
    margin-bottom: 0;
}

.p9lc-resize-handle { display: none; position: absolute; z-index: 30; }
.p9lc-chat-box--floating .p9lc-resize-handle { display: block; }

.p9lc-resize-handle--n, .p9lc-resize-handle--s {
    left: 12px; right: 12px; height: 7px; cursor: ns-resize;
}
.p9lc-resize-handle--n { top: 0; }
.p9lc-resize-handle--s { bottom: 0; }

.p9lc-resize-handle--e, .p9lc-resize-handle--w {
    top: 12px; bottom: 12px; width: 7px; cursor: ew-resize;
}
.p9lc-resize-handle--e { right: 0; }
.p9lc-resize-handle--w { left: 0; }

.p9lc-resize-handle--ne, .p9lc-resize-handle--nw,
.p9lc-resize-handle--se, .p9lc-resize-handle--sw {
    width: 16px; height: 16px; z-index: 31;
}
.p9lc-resize-handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.p9lc-resize-handle--nw { top: 0; left: 0;  cursor: nwse-resize; }
.p9lc-resize-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }
.p9lc-resize-handle--sw { bottom: 0; left: 0;  cursor: nesw-resize; }

.p9lc-chat-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 12px 0;
}
.p9lc-chat-box--floating .p9lc-chat-header {
    cursor: move;
    user-select: none;
    padding-bottom: 8px;
}
.p9lc-chat-header > svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--p9lc-accent);
}

#p9lc-chat-title {
    flex: 0 1 90px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.35;
    color: var(--p9lc-accent);
}

.p9lc-chat-subtitle {
    flex: 1 1 120px;
    min-width: 90px;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--p9lc-text-muted);
}

.p9lc-chat-header-btn {
    flex-shrink: 0;
    align-self: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--p9lc-accent);
    padding: 2px;
    display: flex;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.p9lc-chat-header-btn:hover { opacity: 1; }

/* Floating/draggable chat doesn't work on phone-width screens (see
   isMobileViewport() in land-comps.js, which also no-ops the auto-popout-
   on-send) — hide the pop-out trigger so there's no dead button. Needs
   !important since land-comps.js toggles this via inline style. */
@media ( max-width: 768px ) {
    #p9lc-chat-popout-btn { display: none !important; }
}

/* iOS Safari auto-zooms the whole page on focus for any text input/select
   under 16px — bumping to 16px on mobile only (rather than disabling zoom
   site-wide via the viewport meta tag) fixes the zoom without taking away
   pinch-zoom accessibility everywhere else on the site. Desktop keeps its
   smaller, denser sizing. !important is required here: .p9lc-chat-input's
   own unconditional 13px rule appears later in this file with the exact
   same specificity (single class selector), so without it the later,
   always-on rule would silently win the cascade on mobile too. */
@media ( max-width: 768px ) {
    .p9lc-input, .p9lc-select, .p9lc-chat-input { font-size: 16px !important; }
}

.p9lc-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    height: 220px;
    min-height: 130px;
    max-height: 65vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.p9lc-chat-thread::-webkit-scrollbar { width: 4px; }
.p9lc-chat-thread::-webkit-scrollbar-track { background: transparent; }
.p9lc-chat-thread::-webkit-scrollbar-thumb { background: var(--p9lc-border2); border-radius: 2px; }

.p9lc-chat-box--floating .p9lc-chat-thread {
    flex: 1;
    height: auto;
    max-height: none;
}

/* Dedicated horizontal resize bar, docked mode only — sits between the
   thread and the input row so drags never land on the thread's own
   scrollbar. See initThreadResize() in land-comps.js. */
.p9lc-chat-resize-bar {
    flex-shrink: 0;
    height: 10px;
    /* margin: -5px 0; */
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 5;
    touch-action: none;
}
.p9lc-chat-resize-bar::before {
    content: '';
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: var(--p9lc-border2);
    transition: background 0.15s ease, width 0.15s ease;
}
.p9lc-chat-resize-bar::after {
    content: 'drag';
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--p9lc-text-muted);
    opacity: 0.8;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.p9lc-chat-resize-bar:hover::before,
.p9lc-chat-resize-bar.is-dragging::before {
    background: var(--p9lc-accent);
    width: 48px;
}
.p9lc-chat-resize-bar:hover::after,
.p9lc-chat-resize-bar.is-dragging::after {
    color: var(--p9lc-accent);
    opacity: 1;
}
.p9lc-chat-box--floating .p9lc-chat-resize-bar { display: none; }

.p9lc-chat-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; }
.p9lc-chat-msg--user { flex-direction: row-reverse; align-self: flex-end; }

.p9lc-chat-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--p9lc-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 1px;
    font-size: 11px;
}

.p9lc-chat-bubble {
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--p9lc-text);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.p9lc-chat-msg--assistant .p9lc-chat-bubble {
    background: var(--p9lc-surface-solid);
    box-shadow: var(--p9lc-shadow);
    border-top-left-radius: 3px;
}
.p9lc-chat-msg--user .p9lc-chat-bubble {
    background: rgba(154, 111, 46, 0.16);
    border: 1px solid var(--p9lc-border);
    border-top-right-radius: 3px;
}
.p9lc-chat-msg--error .p9lc-chat-bubble {
    background: rgba(176, 58, 46, 0.08);
    border: 1px solid rgba(176, 58, 46, 0.3);
    color: var(--p9lc-red);
}

.p9lc-chat-typing-dots { display: flex; align-items: center; gap: 5px; padding: 10px 11px; min-width: 44px; }
.p9lc-chat-typing-dots span {
    width: 5px;
    height: 5px;
    background: var(--p9lc-accent);
    border-radius: 50%;
    animation: p9lc-typing-dot 1.2s infinite;
}
.p9lc-chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.p9lc-chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes p9lc-typing-dot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%            { opacity: 1;  transform: translateY(-3px); }
}

/* "Apply to valuation card" — attached under an assistant message whose
   reply included a parsed [REVALUE:] block (see land-comps.js). The new
   numbers are already saved server-side by the time this button renders
   (P9LC_Ajax::handle_results_chat()), so clicking it is just a display
   swap, not a second request. */
.p9lc-chat-apply-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.p9lc-chat-apply-btn {
    background: var(--p9lc-accent);
    color: #fff;
    border: none;
    border-radius: var(--p9lc-radius-sm);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.15s ease;
}
.p9lc-chat-apply-btn:hover { opacity: 0.85; }
.p9lc-chat-apply-btn:disabled { opacity: 0.55; cursor: default; }
.p9lc-chat-applied-note { font-size: 11px; color: var(--p9lc-green); }

.p9lc-chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 12px 12px;
}
.p9lc-chat-input {
    flex: 1;
    background: var(--p9lc-surface-solid);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius-sm);
    padding: 10px 11px;
    font-size: 13px;
    font-family: var(--p9lc-font);
    color: var(--p9lc-text);
    outline: none;
    resize: none;
    line-height: 1.5;
    overflow-y: hidden;
    min-height: 42px;
    max-height: 110px;
    transition: border-color 0.15s ease;
}
.p9lc-chat-input:focus { border-color: var(--p9lc-accent); box-shadow: 0 0 0 3px rgba(154, 111, 46, 0.1); }
.p9lc-chat-input::placeholder { color: var(--p9lc-text-muted); font-size: 12px; }
.p9lc-chat-input:disabled { background: var(--p9lc-surface2); cursor: not-allowed; }

.p9lc-chat-send-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--p9lc-accent);
    border: none;
    border-radius: var(--p9lc-radius-sm);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}
.p9lc-chat-send-btn:hover:not(:disabled)  { opacity: 0.85; }
.p9lc-chat-send-btn:active:not(:disabled) { opacity: 0.7; }
.p9lc-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Run / Ask CTA ladder ─────────────────────────────────────────────────── */
.p9lc-chat-footer {
    padding: 0 12px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.p9lc-chat-footer-note { font-size: 11px; color: var(--p9lc-text-muted); }
.p9lc-chat-box--applied .p9lc-chat-footer-note { color: var(--p9lc-green); }

.p9lc-chat-run-spinner {
    display: none;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: p9lc-spin 0.7s linear infinite;
}
@keyframes p9lc-spin { to { transform: rotate(360deg); } }
#p9lc-chat-run-search.is-loading { opacity: 0.75; cursor: default; pointer-events: none; }
#p9lc-chat-run-search.is-loading .p9lc-chat-run-spinner { display: inline-block; }
#p9lc-chat-run-search.is-loading #p9lc-chat-run-icon { display: none; }

/* Field flagged by applyIntakeFieldsLive() as still missing once the
   assistant is otherwise ready to run — a location (address or zip) is
   the one thing intake chat can't fill in on its own if the user never
   gave one. */
.p9lc-input--missing {
    border-color: var(--p9lc-red) !important;
    box-shadow: 0 0 0 2px rgba(176, 58, 46, 0.2) !important;
    animation: p9lc-missing-pulse 1.8s ease 0s 2;
}
@keyframes p9lc-missing-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(176, 58, 46, 0.2); }
    50%       { box-shadow: 0 0 0 4px rgba(176, 58, 46, 0.35); }
}

/* ── "Start Now" gate (guest bot-check) ──────────────────────────────────── */
/* Covers the whole chat box (.p9lc-chat-box, its parent here) until a guest
   clicks through — see initStartGate() in land-comps.js. The Search button
   below stays a normal sibling, separately disabled until this clears (see
   applyStartGateState()). Absolutely positioned over .p9lc-start-gated,
   which just needs position:relative — mirrors parcel9-parcel-iq's
   .p9piq-start-gated/.p9piq-start-gate almost exactly. */

.p9lc-hidden { display: none !important; }

.p9lc-start-gated { position: relative; min-height: 220px; }

/* Guests keep .p9lc-start-gated on the chat box for its whole page life
   (it's never removed after Start Now clears — only the overlay inside it
   hides). Popping that box out into the floating window adds
   .p9lc-chat-box--floating, which needs position:fixed — but plain
   .p9lc-start-gated and .p9lc-chat-box--floating are both single-class
   selectors of equal specificity, so whichever is declared LATER in this
   file wins the position property, regardless of which classes are
   actually on the element. That silently demoted the floating box back to
   position:relative for every guest, dropping it to the bottom of
   <body>'s normal flow ("floats to the bottom-left") instead of pinning
   it near the viewport corner. This compound selector has higher
   specificity than either alone, so it wins unconditionally. */
.p9lc-start-gated.p9lc-chat-box--floating { position: fixed; min-height: 0; }

.p9lc-start-gate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 20px 16px;
    background: var(--p9lc-surface-solid);
    border-radius: var(--p9lc-radius);
}

.p9lc-gate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(154, 111, 46, 0.1);
    color: var(--p9lc-accent);
    margin-bottom: 4px;
}

.p9lc-gate-eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p9lc-accent);
}

.p9lc-gate-title {
    margin: 0;
    font-family: var(--p9lc-font-serif);
    font-weight: 500;
    font-size: 16px;
    color: var(--p9lc-text);
}

.p9lc-gate-body {
    margin: 0 0 4px;
    max-width: 260px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--p9lc-text-muted);
}

.p9lc-start-gate #p9lc-start-now-btn { max-width: 220px; }

#p9lc-turnstile-widget { margin-bottom: 4px; }

.p9lc-start-gate-status {
    margin: 0;
    font-size: 11px;
    color: var(--p9lc-text-muted);
    min-height: 14px;
}

/* ── Guest teaser (redacted results + claim-after-login) ─────────────────── */
/* The AI summary + comp table are the "real" analysis of a search — for a
   guest they arrive already redacted server-side (see
   P9LC_Comps::build_guest_teaser()), so this blur is pure visual polish on
   top of that, not the actual protection; there's nothing real underneath
   to extract via devtools/view-source. Toggled by renderTeaserState() in
   land-comps.js. Mirrors parcel9-parcel-iq's .p9piq-teaser-wrap almost
   exactly. */

.p9lc-teaser-wrap { position: relative; }

.p9lc-teaser-blur-wrap.p9lc-teaser-active {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

.p9lc-teaser-cta {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.p9lc-teaser-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    max-width: 320px;
    padding: 28px 24px;
    background: var(--p9lc-surface-solid);
    border: 1px solid var(--p9lc-border);
    border-radius: var(--p9lc-radius);
    box-shadow: 0 8px 28px rgba(30, 24, 12, 0.16);
}

.p9lc-teaser-cta-inner .p9lc-gate-body { max-width: 280px; margin-bottom: 8px; }

.p9lc-teaser-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.p9lc-teaser-cta-actions .p9lc-btn--primary {
    width: 100%;
    max-width: 240px;
}

.p9lc-teaser-cta-login {
    font-size: 12px;
    color: var(--p9lc-text-muted);
    text-decoration: underline;
}
.p9lc-teaser-cta-login:hover { color: var(--p9lc-accent); }