/* ═══════════════════════════════════════════════════════════════════════════
   Blue Belmont - Property Detail Page
   Premium cartographic property intelligence styling
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   LABEL COMPOSITION - shared typography for the two label tiers.

   Every uppercase micro-label on the property page was repeating the same
   four properties. This grouped rule declares them once; individual
   selectors only carry their unique additions (margin, overflow, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tier 1: 2xs labels - stat strips, gauge labels, bar labels, mls labels */
.prop-stats-strip-label,
.prop-val-breakdown-label,
.prop-location-group-title,
.prop-owner-detail-label,
.prop-mls-price-label,
.prop-mls-stat-label,
.prop-mls-price-history-title,
.prop-value-bar-label,
.prop-comp-card-stat-label,
.prop-score-gauge-label,
.prop-score-factor-label,
.prop-risk-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
}

/* Tier 2: xs labels - data labels, kv labels, section headers */
.prop-char-label,
.prop-data-label,
.prop-lux-stat-label,
.prop-lux-owner-portfolio-label,
.prop-lux-sales-summary-label,
.prop-lux-value-gap-label,
.prop-lux-kv-label,
.prop-lux-demo-label,
.prop-lux-comps-stat-label,
.prop-lux-lead-prompt-label,
.prop-lux-owner-label,
.prop-lux-avm-label,
.prop-feas-factor-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}


/* ── Page Container ── */
.prop-page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem 6rem;
    background: var(--cream);
    min-height: 100vh;
    overflow-y: auto;
}
.prop-page > * {
    animation: fadeInUp var(--anim-slow) var(--easing) both;
}
.prop-page > *:nth-child(2) { animation-delay: 0.05s; }
.prop-page > *:nth-child(3) { animation-delay: 0.1s; }
.prop-page > *:nth-child(4) { animation-delay: 0.15s; }
.prop-page > *:nth-child(5) { animation-delay: 0.2s; }
.prop-page > *:nth-child(6) { animation-delay: 0.25s; }


/* ═══════════════════════════════════════════════════════════════════════════
   1. PROPERTY HERO HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-hero {
    position: relative;
    background: var(--slate);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: 2.5rem 2.25rem 2rem;
    margin: 0 -1.5rem 0;
    overflow: hidden;
    color: #fff;
}
/* Hero background is a solid dark (--slate). The decorative gradient
   overlays that used to sit here were removed - they added visual
   complexity without helping the user read the data faster. */
.prop-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.0625rem;
    background: rgba(181, 148, 42, 0.3);
}

.prop-hero-content {
    position: relative;
    z-index: 1;
}

.prop-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1rem;
    font-weight: var(--weight-medium);
}
.prop-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition);
}
.prop-hero-breadcrumb a:hover {
    color: var(--gold-light);
}
.prop-hero-breadcrumb-sep {
    font-size: 0.5rem;
    opacity: 0.4;
}

.prop-hero-address {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: #fff;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}
.prop-hero-city {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.55);
    font-weight: var(--weight-regular);
    margin-bottom: 0.75rem;
}

.prop-hero-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.prop-hero-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.prop-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: 1.25rem;
    min-height: 1.25rem;
    padding: 0 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-body);
    vertical-align: middle;
    white-space: nowrap;
}
.prop-hero-badge--zoning {
    background: rgba(181, 148, 42, 0.15);
    color: var(--gold-light);
    border: 0.0625rem solid rgba(181, 148, 42, 0.25);
}
.prop-hero-badge--jurisdiction {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
    border: 0.0625rem solid rgba(255, 255, 255, 0.12);
}
.prop-hero-badge--status {
    background: rgba(46, 125, 50, 0.15);
    color: #81c784;
    border: 0.0625rem solid rgba(46, 125, 50, 0.25);
}
.prop-hero-badge--alert {
    background: rgba(198, 40, 40, 0.15);
    color: #ef9a9a;
    border: 0.0625rem solid rgba(198, 40, 40, 0.25);
}

.prop-hero-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: var(--weight-medium);
}
.prop-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.prop-hero-meta-icon {
    font-size: 0.75rem;
    opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. QUICK STATS STRIP
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--warm-white);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    margin: -1.25rem 0.75rem 1.5rem;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.prop-stats-strip-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.75rem;
    text-align: center;
    position: relative;
    transition: background var(--transition);
    min-width: 0;
}
.prop-stats-strip-item:hover {
    background: var(--bg-hover);
}
.prop-stats-strip-item + .prop-stats-strip-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 0.0625rem;
    background: var(--border-light);
}

.prop-stats-strip-label {
    /* Typography inherited from grouped label-2xs rule above. */
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.prop-stats-strip-value {
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    font-weight: var(--weight-medium);
    color: var(--slate);
    line-height: var(--leading-tight);
    white-space: nowrap;
}
.prop-stats-strip-value.highlight {
    color: var(--gold-dark);
}

.prop-stats-strip-sub {
    font-size: 0.625rem;
    color: var(--muted);
    margin-top: 0.125rem;
    font-weight: var(--weight-medium);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. SECTION NAVIGATOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section navigator - sticks just below the top nav so the realtor can
   jump between high-value sections without losing context. Horizontal
   scrolling on tablet/mobile keeps the bar from wrapping or hiding. */
.prop-section-nav {
    position: sticky;
    top: var(--top-nav-h, 3.5rem);
    z-index: 50;
    background: var(--surface-card);
    border-bottom: 0.0625rem solid var(--border-light);
    margin: var(--space-6) calc(var(--space-6) * -1) var(--space-6);
    padding: 0 var(--space-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: var(--shadow-card);
    display: flex;
    gap: var(--space-1);
}
.prop-section-nav::-webkit-scrollbar { display: none; }

.prop-section-nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4);
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--anim-fast) var(--easing);
    text-transform: none;
    letter-spacing: 0;
}
.prop-section-nav-btn:hover {
    color: var(--text);
}
.prop-section-nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-gold);
}
.prop-section-nav-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 0.1875rem;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform var(--anim-normal) var(--easing);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.prop-section-nav-btn.active {
    color: var(--gold-dark);
}
.prop-section-nav-btn.active::after {
    transform: scaleX(1);
}
.prop-section-nav-btn-icon {
    font-size: var(--text-base);
    opacity: 0.7;
}
.prop-section-nav-btn.active .prop-section-nav-btn-icon {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. DATA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-section {
    margin-bottom: var(--space-6);
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition);
    /* Clear the sticky section nav when scrollIntoView targets a section */
    scroll-margin-top: 4.5rem;
}
.prop-section:hover {
    box-shadow: var(--shadow-sm);
}

.prop-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.0625rem solid var(--border-light);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition);
}
.prop-section-header:hover {
    background: var(--bg-hover);
}

.prop-section-header-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.prop-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--gold-muted);
    color: var(--gold);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.prop-section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--weight-bold);
    color: var(--slate);
    letter-spacing: 0.01em;
}

.prop-section-subtitle {
    font-size: var(--text-xs);
    color: var(--muted);
    font-weight: var(--weight-medium);
    margin-top: 0.0625rem;
}

.prop-section-chevron {
    font-size: var(--text-xs);
    color: var(--faint);
    transition: transform var(--anim-normal) var(--easing);
    flex-shrink: 0;
}
.prop-section.collapsed .prop-section-chevron {
    transform: rotate(-90deg);
}

.prop-section-body {
    padding: var(--space-5);
    max-height: 125rem;
    overflow: hidden;
    transition: max-height var(--anim-slow) var(--easing), padding var(--anim-slow) var(--easing), opacity var(--anim-normal) var(--easing);
    opacity: 1;
}
.prop-section.collapsed .prop-section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.prop-section-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 0.0625rem solid var(--border-light);
    background: var(--bg-subtle);
    font-size: var(--text-xs);
    color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. PROPERTY CHARACTERISTICS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-characteristics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.prop-char-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5625rem 0.875rem;
    border-bottom: 0.0625rem solid var(--border-light);
    gap: 0.75rem;
    transition: background var(--transition);
}
.prop-char-item:hover {
    background: var(--bg-hover);
}
.prop-char-item:nth-child(odd) {
    border-right: 0.0625rem solid var(--border-light);
}
/* Remove bottom border from last row */
.prop-char-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.prop-char-label {
    flex-shrink: 0;
}

.prop-char-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    text-align: right;
    word-break: break-word;
}
.prop-char-value.na {
    color: var(--faint);
    font-style: italic;
    font-family: var(--font-body);
}

/* Single-column variant */
.prop-characteristics--single {
    grid-template-columns: 1fr;
}
.prop-characteristics--single .prop-char-item {
    border-right: none;
}
.prop-characteristics--single .prop-char-item:last-child {
    border-bottom: none;
}

/* Three-column variant for dense data */
.prop-characteristics--dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.prop-characteristics--dense .prop-char-item:nth-child(odd) {
    border-right: none;
}
.prop-characteristics--dense .prop-char-item:not(:nth-child(3n)) {
    border-right: 0.0625rem solid var(--border-light);
}
.prop-characteristics--dense .prop-char-item:nth-last-child(-n+3) {
    border-bottom: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. VALUATION TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-valuation-timeline {
    position: relative;
    padding: 1.5rem 0 0.5rem;
}

.prop-val-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.prop-val-current {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: var(--weight-medium);
    color: var(--slate);
}
.prop-val-change {
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-sm);
}
.prop-val-change.up {
    color: var(--success);
    background: var(--success-light);
}
.prop-val-change.down {
    color: var(--error);
    background: var(--error-light);
}
.prop-val-change.flat {
    color: var(--muted);
    background: var(--bg-subtle);
}

.prop-val-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 8rem;
    padding-bottom: 2rem;
}

/* Connecting line behind the dots */
.prop-val-track::before {
    content: '';
    position: absolute;
    bottom: calc(2rem + 0.3125rem);
    left: 0.375rem;
    right: 0.375rem;
    height: 0.125rem;
    background: var(--border-light);
    z-index: 0;
}

.prop-val-point {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.prop-val-bar {
    width: 2.5rem;
    min-height: 0.25rem;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: 0.5rem;
    transition: opacity var(--transition), transform var(--transition);
    position: relative;
}
.prop-val-point:hover .prop-val-bar {
    opacity: 0.8;
    transform: scaleY(1.03);
}

.prop-val-bar-value {
    position: absolute;
    top: -1.375rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition);
}
.prop-val-point:hover .prop-val-bar-value {
    opacity: 1;
}

.prop-val-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--gold);
    border: 0.125rem solid var(--warm-white);
    box-shadow: 0 0 0 0.0625rem var(--gold-border);
    margin-bottom: 0.5rem;
    transition: transform var(--transition), box-shadow var(--transition);
}
.prop-val-point:hover .prop-val-dot {
    transform: scale(1.4);
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.2);
}
.prop-val-point.current .prop-val-dot {
    background: var(--slate);
    box-shadow: 0 0 0 0.125rem var(--gold);
    width: 0.75rem;
    height: 0.75rem;
}

.prop-val-year {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--faint);
    font-weight: var(--weight-medium);
}
.prop-val-point.current .prop-val-year {
    color: var(--text);
    font-weight: var(--weight-bold);
}

.prop-val-amount {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

/* Valuation breakdown row */
.prop-val-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border-light);
}
.prop-val-breakdown-item {
    text-align: center;
    padding: 0.625rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}
.prop-val-breakdown-label {
    margin-bottom: 0.25rem;
}
.prop-val-breakdown-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--slate);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. COMP ANALYSIS TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-comps {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.prop-comps thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.prop-comps th {
    background: var(--bg-subtle);
    border-bottom: 0.125rem solid var(--border);
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    white-space: nowrap;
    user-select: none;
}
.prop-comps th.num {
    text-align: right;
}

.prop-comps td {
    padding: 0.625rem 0.75rem;
    border-bottom: 0.0625rem solid var(--border-light);
    color: var(--text);
    vertical-align: middle;
}
.prop-comps td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
}
.prop-comps td.address {
    font-weight: var(--weight-semibold);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prop-comps tbody tr {
    transition: background var(--transition);
}
.prop-comps tbody tr:hover {
    background: var(--bg-hover);
}
.prop-comps tbody tr:last-child td {
    border-bottom: none;
}

/* Subject row highlight */
.prop-comps tbody tr.subject {
    background: var(--gold-muted);
    font-weight: var(--weight-semibold);
}
.prop-comps tbody tr.subject td {
    border-bottom-color: var(--gold-border);
}

/* Diff indicators */
.prop-comp-diff {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
    margin-left: 0.25rem;
}
.prop-comp-diff.better {
    color: var(--success);
}
.prop-comp-diff.worse {
    color: var(--error);
}
.prop-comp-diff.neutral {
    color: var(--faint);
}

.prop-comp-diff-icon {
    font-size: 0.5rem;
}

/* Distance column */
.prop-comp-distance {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

/* Comp score badge */
.prop-comp-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.25rem;
    min-height: 1.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    vertical-align: middle;
}
.prop-comp-score.high {
    background: var(--success-light);
    color: var(--success);
}
.prop-comp-score.medium {
    background: var(--warning-light);
    color: var(--warning);
}
.prop-comp-score.low {
    background: var(--error-light);
    color: var(--error);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. SCORE GAUGE
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-score-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
}

.prop-score-gauge-ring {
    position: relative;
    width: 10rem;
    height: 5.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.prop-score-gauge-svg {
    width: 10rem;
    height: 10rem;
    transform: rotate(-90deg);
}

.prop-score-gauge-track {
    fill: none;
    stroke: var(--border-light);
    stroke-width: 10;
    stroke-linecap: round;
}

.prop-score-gauge-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 251.3;
    stroke-dashoffset: 251.3;
    transition: stroke var(--anim-slow) var(--easing);
}

/* Score color classes applied to .prop-score-gauge-fill */
.prop-score-gauge-fill.score-low {
    stroke: var(--error);
}
.prop-score-gauge-fill.score-medium {
    stroke: var(--warning);
}
.prop-score-gauge-fill.score-high {
    stroke: var(--success);
}
.prop-score-gauge-fill.score-excellent {
    stroke: var(--success);
}

.prop-score-gauge-value {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.prop-score-gauge-number {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--slate);
}
.prop-score-gauge-max {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--faint);
    font-weight: var(--weight-regular);
}

.prop-score-gauge-label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: var(--weight-bold);
    color: var(--slate);
    margin-bottom: 0.25rem;
    text-align: center;
}

.prop-score-gauge-desc {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    max-width: 18rem;
    line-height: 1.4;
}

/* Score factors list */
.prop-score-factors {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border-light);
}
.prop-score-factor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
}
.prop-score-factor-label {
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    flex: 1;
}
.prop-score-factor-bar {
    width: 6rem;
    height: 0.3125rem;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex-shrink: 0;
}
.prop-score-factor-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--anim-slow) var(--easing);
}
.prop-score-factor-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text);
    width: 2rem;
    text-align: right;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. RISK INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-risk {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
}

.prop-risk-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    min-width: 6rem;
    flex-shrink: 0;
}

.prop-risk-bar {
    flex: 1;
    height: 0.375rem;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
    max-width: 10rem;
}

.prop-risk-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--anim-slow) var(--easing);
}

.prop-risk-level {
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.4375rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.prop-risk.low .prop-risk-fill {
    background: var(--success);
    width: 25%;
}
.prop-risk.low .prop-risk-level {
    color: var(--success);
    background: var(--success-light);
}

.prop-risk.medium .prop-risk-fill {
    background: var(--warning);
    width: 55%;
}
.prop-risk.medium .prop-risk-level {
    color: var(--warning);
    background: var(--warning-light);
}

.prop-risk.high .prop-risk-fill {
    background: var(--error);
    width: 85%;
}
.prop-risk.high .prop-risk-level {
    color: var(--error);
    background: var(--error-light);
}

/* Risk grid layout */
.prop-risk-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. LOCATION CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-location {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.prop-location-map {
    background: var(--bg-subtle);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-md);
    min-height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.prop-location-map-placeholder {
    font-size: 0.75rem;
    color: var(--faint);
    font-style: italic;
}

.prop-location-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prop-location-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prop-location-group-title {
    letter-spacing: 0.08em;
    padding-bottom: 0.375rem;
    border-bottom: 0.0625rem solid var(--border-light);
    margin-bottom: 0.25rem;
}

.prop-location-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3125rem 0;
    gap: 0.75rem;
}
.prop-location-row-label {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: var(--weight-medium);
}
.prop-location-row-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    color: var(--text);
}

/* Score badges for walk/transit/bike - uses badge-lg height (1.5rem)
   because these display numeric scores that need more horizontal room. */
.prop-location-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 1.5rem;
    min-height: 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    background: var(--bg-subtle);
    color: var(--text);
    border: 0.0625rem solid var(--border-light);
    vertical-align: middle;
}
.prop-location-score.good {
    background: var(--success-light);
    color: var(--success);
    border-color: transparent;
}
.prop-location-score.moderate {
    background: var(--warning-light);
    color: var(--warning);
    border-color: transparent;
}
.prop-location-score.poor {
    background: var(--error-light);
    color: var(--error);
    border-color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. OWNER TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-owner-timeline {
    position: relative;
    padding-left: 1.75rem;
}

/* Vertical connecting line */
.prop-owner-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 0.125rem;
    background: linear-gradient(180deg, var(--gold) 0%, var(--border-light) 100%);
    border-radius: 0.0625rem;
}

.prop-owner-event {
    position: relative;
    padding: 0.75rem 0 1.25rem;
}
.prop-owner-event:last-child {
    padding-bottom: 0;
}

/* Timeline dot */
.prop-owner-event::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 1rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--warm-white);
    border: 0.125rem solid var(--gold);
    z-index: 1;
    transition: transform var(--transition), background var(--transition);
}
.prop-owner-event:first-child::before {
    background: var(--gold);
    width: 0.75rem;
    height: 0.75rem;
    left: calc(-1.5rem - 0.0625rem);
    top: calc(1rem - 0.0625rem);
}
.prop-owner-event:hover::before {
    transform: scale(1.3);
    background: var(--gold);
}

.prop-owner-date {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.prop-owner-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
    margin-bottom: 0.1875rem;
}

.prop-owner-type {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.375rem;
}

.prop-owner-details {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.prop-owner-detail {
    display: flex;
    flex-direction: column;
}
.prop-owner-detail-label {
    /* Typography inherited from grouped label-2xs rule. */
}
.prop-owner-detail-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. ENVIRONMENTAL GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-env-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.prop-env-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    border: 0.0625rem solid var(--border-light);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.prop-env-item:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.prop-env-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
}

.prop-env-indicator.clear {
    background: var(--success-light);
    color: var(--success);
    border: 0.0625rem solid rgba(46, 125, 50, 0.15);
}
.prop-env-indicator.caution {
    background: var(--warning-light);
    color: var(--warning);
    border: 0.0625rem solid rgba(245, 124, 0, 0.15);
}
.prop-env-indicator.risk {
    background: var(--error-light);
    color: var(--error);
    border: 0.0625rem solid rgba(198, 40, 40, 0.15);
}
.prop-env-indicator.unknown {
    background: var(--bg-hover);
    color: var(--faint);
    border: 0.0625rem solid var(--border-light);
}

.prop-env-content {
    flex: 1;
    min-width: 0;
}
.prop-env-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: 0.125rem;
}
.prop-env-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}
.prop-env-note {
    font-size: 0.625rem;
    color: var(--faint);
    margin-top: 0.25rem;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. MLS LISTING CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-mls {
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--warm-white);
}

.prop-mls-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: var(--slate);
    color: #fff;
}
.prop-mls-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.25rem;
    min-height: 1.25rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    white-space: nowrap;
}
.prop-mls-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}
.prop-mls-status-dot.active {
    background: var(--success);
    box-shadow: 0 0 0.25rem rgba(76, 175, 80, 0.6);
}
.prop-mls-status-dot.pending {
    background: var(--warning);
    box-shadow: 0 0 0.25rem rgba(245, 124, 0, 0.6);
}
.prop-mls-status-dot.sold {
    background: var(--error);
}
.prop-mls-status-dot.withdrawn {
    background: var(--faint);
}
.prop-mls-id {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.45);
}

.prop-mls-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Photos carousel placeholder */
.prop-mls-photos {
    background: var(--bg-subtle);
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0.0625rem solid var(--border-light);
    position: relative;
    overflow: hidden;
}
.prop-mls-photo-count {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(28, 35, 49, 0.75);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}
.prop-mls-photos-placeholder {
    font-size: 0.75rem;
    color: var(--faint);
    font-style: italic;
}

.prop-mls-info {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.prop-mls-price {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--slate);
}
.prop-mls-price-label {
    /* Typography inherited from grouped label-2xs rule. */
}

.prop-mls-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.prop-mls-stat {
    display: flex;
    flex-direction: column;
}
.prop-mls-stat-label {
    /* Typography inherited from grouped label-2xs rule. */
}
.prop-mls-stat-value {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--text);
}

/* Price history within MLS */
.prop-mls-price-history {
    margin-top: 0.375rem;
    padding-top: 0.625rem;
    border-top: 0.0625rem solid var(--border-light);
}
.prop-mls-price-history-title {
    letter-spacing: 0.08em;
    margin-bottom: 0.375rem;
}
.prop-mls-price-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: var(--text-xs);
}
.prop-mls-price-event-date {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--faint);
}
.prop-mls-price-event-action {
    color: var(--muted);
    font-weight: var(--weight-medium);
}
.prop-mls-price-event-amount {
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--warm-white);
    border-top: 0.0625rem solid var(--border);
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.06);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transform: translateY(0);
    transition: transform var(--anim-normal) var(--easing), box-shadow var(--anim-normal) var(--easing);
}
.prop-action-bar.hidden {
    transform: translateY(100%);
}

.prop-action-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 72rem;
    width: 100%;
    justify-content: flex-end;
}

.prop-action-bar-summary {
    margin-right: auto;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.prop-action-bar-address {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: var(--weight-bold);
    color: var(--slate);
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-action-bar-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* Action buttons */
.prop-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 0.0625rem solid var(--border);
    background: var(--warm-white);
    color: var(--text-secondary);
}
.prop-action-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold-dark);
    background: var(--gold-muted);
}
.prop-action-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-gold);
}
.prop-action-btn:active:not(:disabled) {
    transform: translateY(0.0625rem);
}
.prop-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.prop-action-btn-icon {
    font-size: var(--text-sm);
    opacity: 0.7;
}

/* Primary action */
.prop-action-btn--primary {
    background: var(--slate);
    color: var(--gold-light);
    border-color: var(--slate);
}
.prop-action-btn--primary:hover:not(:disabled) {
    background: var(--slate-light);
    color: var(--gold-light);
    border-color: var(--slate-light);
    box-shadow: var(--shadow-md);
}

/* Gold accent action */
.prop-action-btn--gold {
    background: var(--gold);
    color: var(--slate);
    border-color: var(--gold);
}
.prop-action-btn--gold:hover:not(:disabled) {
    background: var(--gold-light);
    border-color: var(--gold-light);
    box-shadow: var(--shadow-md);
}

/* Danger action */
.prop-action-btn--danger {
    color: var(--error);
    border-color: rgba(198, 40, 40, 0.2);
}
.prop-action-btn--danger:hover:not(:disabled) {
    background: var(--error-light);
    border-color: var(--error);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. TAB CONTENT PANELS
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--anim-normal) var(--easing), transform var(--anim-normal) var(--easing);
}
.prop-tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp var(--anim-normal) var(--easing) both;
}

/* Tab panel within a section (no extra padding) */
.prop-section-body > .prop-tab-panel {
    padding: 0;
}

/* Tab sub-navigation for panels within a section */
.prop-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 0.0625rem solid var(--border-light);
    margin-bottom: 1rem;
}
.prop-tab-nav-btn {
    position: relative;
    padding: var(--space-2) 0.875rem;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--muted);
    cursor: pointer;
    transition: color var(--transition);
}
.prop-tab-nav-btn:hover {
    color: var(--text);
}
.prop-tab-nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-gold);
}
.prop-tab-nav-btn.active {
    color: var(--gold-dark);
}
.prop-tab-nav-btn::after {
    content: '';
    position: absolute;
    bottom: -0.0625rem;
    left: 0.5rem;
    right: 0.5rem;
    height: 0.125rem;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform var(--anim-fast) var(--easing);
}
.prop-tab-nav-btn.active::after {
    transform: scaleX(1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two-column layout within a section body */
.prop-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.prop-columns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Divider within sections */
.prop-divider {
    height: 0.0625rem;
    background: var(--border-light);
    margin: 1rem 0;
}
.prop-divider--gold {
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

/* Inline data pair */
.prop-data-pair {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.375rem 0;
    gap: 0.75rem;
}
.prop-data-pair + .prop-data-pair {
    border-top: 0.0625rem solid var(--border-light);
}
.prop-data-label {
    flex-shrink: 0;
}
.prop-data-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    text-align: right;
}

/* Status dot */
.prop-status-dot {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
}
.prop-status-dot.active { background: var(--success); }
.prop-status-dot.pending { background: var(--warning); }
.prop-status-dot.inactive { background: var(--faint); }
.prop-status-dot.error { background: var(--error); }

/* Emphasis value */
.prop-value-large {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: var(--weight-medium);
    color: var(--slate);
}

/* Source attribution */
.prop-source {
    font-size: 0.625rem;
    color: var(--faint);
    font-style: italic;
    margin-top: 0.75rem;
}
.prop-source a {
    color: var(--faint);
    text-decoration: underline;
    text-decoration-color: var(--border-light);
}
.prop-source a:hover {
    color: var(--muted);
}

/* Empty state for missing data */
.prop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}
.prop-empty-icon {
    font-size: 1.5rem;
    color: var(--border);
    margin-bottom: 0.5rem;
}
.prop-empty-text {
    font-size: var(--text-sm);
    color: var(--faint);
    max-width: 20rem;
    line-height: 1.4;
}

/* Loading skeleton */
.prop-skeleton {
    background: linear-gradient(90deg,
        var(--bg-subtle) 25%,
        var(--border-light) 37%,
        var(--bg-subtle) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: var(--radius-sm);
}
.prop-skeleton--text {
    height: 0.875rem;
    width: 60%;
    margin-bottom: 0.375rem;
}
.prop-skeleton--value {
    height: 1.25rem;
    width: 40%;
}
.prop-skeleton--block {
    height: 3rem;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* propTabIn and propSkeleton removed - consolidated into the shared
   fadeInUp and shimmer keyframes in app.css. */

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .prop-page > *,
    .prop-tab-panel.active,
    .prop-skeleton {
        animation: none;
    }
    .prop-tab-panel {
        transition: none;
    }
    .prop-section-body {
        transition: none;
    }
    .prop-val-dot,
    .prop-val-bar,
    .prop-owner-event::before,
    .prop-risk-fill,
    .prop-score-factor-fill,
    .prop-score-gauge-fill {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    /* Page setup */
    @page {
        margin: 0.75in;
        size: letter;
    }

    body {
        font-size: 10pt;
        color: #000;
        background: #fff;
        overflow: visible;
        height: auto;
    }

    /* Hide interactive elements */
    .prop-action-bar,
    .prop-section-nav,
    .prop-section-chevron,
    .prop-hero-breadcrumb,
    .top-nav,
    .nav-actions,
    .prop-action-btn,
    .prop-tab-nav {
        display: none !important;
    }

    /* Reset page container */
    .prop-page {
        max-width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
    }
    .prop-page > * {
        animation: none;
    }

    /* Hero header - print as clean header */
    .prop-hero {
        background: none;
        color: #000;
        border-radius: 0;
        padding: 0 0 0.5rem;
        margin: 0 0 0.375rem;
        border-bottom: 2pt solid #000;
        page-break-after: avoid;
    }
    .prop-hero::before,
    .prop-hero::after {
        display: none;
    }
    .prop-hero-address {
        color: #000;
        font-size: 16pt;
    }
    .prop-hero-city {
        color: #333;
        font-size: 10pt;
    }
    .prop-hero-id {
        color: #555;
        font-size: 8pt;
    }
    .prop-hero-badge {
        border: 1pt solid #999;
        background: none;
        color: #333;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Stats strip - no box shadow */
    .prop-stats-strip {
        box-shadow: none;
        border: 1pt solid #ccc;
        margin: 0.25rem 0 0.5rem;
        border-radius: 0;
    }
    .prop-stats-strip-item + .prop-stats-strip-item::before {
        background: #ccc;
    }

    /* Sections - no decorative styling */
    .prop-section {
        border: none;
        border-bottom: 0.5pt solid #ddd;
        border-radius: 0;
        margin-bottom: 0.375rem;
        box-shadow: none;
        page-break-inside: avoid;
    }
    .prop-section-header {
        border-bottom: 0.5pt solid #ddd;
        padding: 0.375rem 0;
        cursor: default;
    }
    .prop-section-header:hover {
        background: none;
    }
    .prop-section-icon {
        display: none;
    }
    .prop-section-title {
        font-size: 11pt;
    }

    /* Ensure collapsed sections are visible */
    .prop-section.collapsed .prop-section-body {
        max-height: none;
        opacity: 1;
        padding: 0.375rem 0;
    }
    .prop-section-body {
        padding: 0.375rem 0;
    }

    /* Characteristics grid */
    .prop-characteristics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .prop-char-item {
        padding: 0.25rem 0.5rem;
        border-color: #eee;
    }
    .prop-char-item:hover {
        background: none;
    }

    /* Valuation timeline */
    .prop-val-bar {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .prop-val-bar-value {
        opacity: 1;
    }

    /* Comps table */
    .prop-comps th {
        background: #f5f5f5;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .prop-comps tbody tr:hover {
        background: none;
    }
    .prop-comps tbody tr.subject {
        background: #f9f7f0;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Score gauge */
    .prop-score-gauge-fill {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Risk indicators */
    .prop-risk-fill,
    .prop-risk-level,
    .prop-env-indicator {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Location card */
    .prop-location {
        grid-template-columns: 1fr;
    }
    .prop-location-map {
        min-height: 8rem;
        border: 0.5pt solid #ccc;
    }

    /* MLS card */
    .prop-mls-status-bar {
        background: #333;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .prop-mls-body {
        grid-template-columns: 1fr;
    }
    .prop-mls-photos {
        display: none;
    }

    /* Owner timeline */
    .prop-owner-timeline::before {
        background: #999;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .prop-owner-event::before {
        border-color: #999;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .prop-owner-event:hover::before {
        transform: none;
    }

    /* Environmental grid */
    .prop-env-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.375rem;
    }
    .prop-env-item {
        padding: 0.375rem;
        box-shadow: none;
    }
    .prop-env-item:hover {
        border-color: #ddd;
        box-shadow: none;
    }

    /* Tab panels - show all */
    .prop-tab-panel {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        page-break-inside: avoid;
    }

    /* Print footer */
    .prop-page::after {
        content: 'Property Report generated by Blue Belmont';
        display: block;
        text-align: center;
        font-family: var(--font-body);
        font-size: 7pt;
        color: #999;
        padding-top: 1rem;
        margin-top: 1.5rem;
        border-top: 0.5pt solid #ddd;
    }

    /* Links */
    a[href] {
        color: #000;
        text-decoration: none;
    }

    /* Remove all hover transitions */
    * {
        transition: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 64em) {
    .prop-hero {
        padding: 2rem 1.5rem 1.5rem;
    }
    .prop-hero-address {
        font-size: 1.5rem;
    }

    .prop-stats-strip {
        margin: -1rem 0.5rem 1.25rem;
    }
    .prop-stats-strip-item {
        padding: 0.75rem 0.5rem;
    }
    .prop-stats-strip-value {
        font-size: var(--text-base);
    }

    .prop-location {
        grid-template-columns: 1fr;
    }

    .prop-mls-body {
        grid-template-columns: 1fr;
    }
    .prop-mls-photos {
        border-right: none;
        border-bottom: 0.0625rem solid var(--border-light);
        min-height: 10rem;
    }

    .prop-env-grid {
        grid-template-columns: 1fr;
    }

    .prop-columns {
        grid-template-columns: 1fr;
    }
    .prop-columns--3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 48em) {
    .prop-page {
        padding: 0 1rem 5rem;
    }

    .prop-hero {
        padding: 1.5rem 1.25rem 1.25rem;
        margin: 0 -1rem 0;
    }
    .prop-hero-address {
        font-size: 1.25rem;
    }
    .prop-hero-badges {
        gap: 0.375rem;
    }

    .prop-stats-strip {
        flex-wrap: wrap;
        margin: -0.75rem 0.25rem 1rem;
    }
    .prop-stats-strip-item {
        flex: 1 1 calc(33.333% - 0.0625rem);
        min-width: 5rem;
        padding: 0.625rem 0.375rem;
    }
    .prop-stats-strip-item + .prop-stats-strip-item::before {
        display: none;
    }
    .prop-stats-strip-value {
        font-size: 0.875rem;
    }

    .prop-section-nav {
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .prop-section-header {
        padding: 0.75rem 1rem;
    }
    .prop-section-body {
        padding: 1rem;
    }

    .prop-characteristics {
        grid-template-columns: 1fr;
    }
    .prop-char-item:nth-child(odd) {
        border-right: none;
    }
    .prop-char-item:last-child {
        border-bottom: none;
    }

    .prop-characteristics--dense {
        grid-template-columns: 1fr;
    }
    .prop-characteristics--dense .prop-char-item:not(:nth-child(3n)) {
        border-right: none;
    }

    .prop-val-track {
        height: 6rem;
    }
    .prop-val-breakdown {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .prop-comps {
        font-size: 0.75rem;
    }
    .prop-comps th,
    .prop-comps td {
        padding: 0.5rem;
    }

    .prop-score-gauge-ring {
        width: 8rem;
        height: 4.5rem;
    }
    .prop-score-gauge-svg {
        width: 8rem;
        height: 8rem;
    }
    .prop-score-gauge-number {
        font-size: 1.5rem;
    }

    .prop-owner-timeline {
        padding-left: 1.5rem;
    }

    .prop-env-grid {
        grid-template-columns: 1fr;
    }

    .prop-action-bar {
        padding: 0.625rem 1rem;
    }
    .prop-action-bar-address {
        max-width: 10rem;
        font-size: 0.75rem;
    }
    .prop-action-btn {
        padding: 0.4375rem 0.75rem;
        font-size: var(--text-xs);
    }

    .prop-columns--3 {
        grid-template-columns: 1fr;
    }
}

/* Small mobile */
@media (max-width: 30em) {
    .prop-hero-address {
        font-size: var(--text-lg);
    }
    .prop-hero-meta {
        flex-direction: column;
        gap: 0.375rem;
    }

    .prop-stats-strip-item {
        flex: 1 1 50%;
    }

    .prop-action-bar-inner {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .prop-action-bar-summary {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ADDITIONAL PROPERTY COMPONENTS (referenced by property.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Transfer Timeline ── */
.prop-timeline {
    position: relative;
    padding-left: 1.5rem;
}
.prop-timeline::before {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 0.0625rem;
    background: var(--border);
}
.prop-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
    padding-left: 0.75rem;
}
.prop-timeline-item:last-child { padding-bottom: 0; }
/* Wrapper around the date/title/detail/price stack inside each timeline
   item. Without this rule the content sat without internal spacing and the
   date+title collapsed onto one another. */
.prop-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.prop-timeline-dot {
    position: absolute;
    left: -1.25rem;
    top: 0.25rem;
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 50%;
    background: var(--border);
    border: 0.125rem solid var(--warm-white);
    z-index: 1;
}
.prop-timeline-dot.current {
    background: var(--gold);
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.15);
}
.prop-timeline-date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--faint);
    margin-bottom: 0.125rem;
}
.prop-timeline-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: 0.125rem;
}
.prop-timeline-detail {
    font-size: 0.75rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.prop-timeline-detail strong { font-weight: var(--weight-semibold); color: var(--text-secondary); }
.prop-timeline-price {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--gold-dark);
    margin-top: 0.25rem;
}

/* ── Zone Badge (large) ── */
.prop-zone-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--gold-dark);
    background: var(--gold-muted);
    border: 0.0625rem solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 0.375rem 0.875rem;
    min-width: 3.5rem;
    text-align: center;
}

/* ── Score Mini Bar ── */
.prop-score-mini {
    width: 6rem;
    height: 0.375rem;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.prop-score-mini-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--anim-slow) var(--easing);
}
.prop-score-mini-fill.success { background: var(--success); }
.prop-score-mini-fill.warning { background: var(--warning); }
.prop-score-mini-fill.error { background: var(--error); }

/* ── Value Composition Bar ── */
.prop-value-bar {
    display: flex;
    height: 1.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0.0625rem solid var(--border-light);
}
.prop-value-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    transition: flex var(--anim-normal) var(--easing);
}
.prop-value-bar-segment.land { background: rgba(181, 148, 42, 0.15); }
.prop-value-bar-segment.improvement { background: rgba(21, 101, 192, 0.12); }
.prop-value-bar-label {
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.375rem;
}

/* ── Feasibility Factors ── */
.prop-feasibility-factors {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.prop-feas-factor {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.prop-feas-factor-label {
    /* Typography inherited from grouped label-xs rule. */
    width: 5rem;
    flex-shrink: 0;
}
.prop-feas-factor-bar {
    flex: 1;
    height: 0.3125rem;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.prop-feas-factor-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--anim-slow) var(--easing);
}
.prop-feas-factor-score {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text);
    width: 1.75rem;
    text-align: right;
    flex-shrink: 0;
}

/* ── Score Gauge ── */
.prop-score-gauge {
    flex-shrink: 0;
}

/* ── Action Bar Info Row ── */
.prop-action-bar-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
.prop-action-bar-address {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    color: var(--slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prop-action-bar-value {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--gold-dark);
    flex-shrink: 0;
}
.prop-action-bar-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SIMILAR PROPERTIES CAROUSEL
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-comp-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}
.prop-comp-scroll::-webkit-scrollbar { height: 0.25rem; }
.prop-comp-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-xs); }
.prop-comp-scroll::-webkit-scrollbar-track { background: transparent; }

.prop-comp-card {
    min-width: 15rem;
    max-width: 18rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1rem;
    transition: border-color var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing),
                transform var(--anim-fast) var(--easing);
}
.prop-comp-card:hover {
    border-color: var(--gold-border);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-0.0625rem);
}
.prop-comp-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.prop-comp-card-address {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: 1.3;
    /* Long addresses (rural routes, multi-unit lines) used to bleed past
       the card edge. Clamp to two lines with an ellipsis so the card
       height stays predictable inside its grid track. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.prop-comp-card-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.prop-comp-card-stat {
    display: flex;
    flex-direction: column;
}
.prop-comp-card-stat-label {
    /* Typography inherited from grouped label-2xs rule. */
}
.prop-comp-card-stat-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .prop-hero { background: #1c2331 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .prop-action-bar { display: none !important; }
    .prop-section-nav { display: none !important; }
    .prop-hero-actions { display: none !important; }
    .prop-page { padding: 0 !important; max-width: 100% !important; }
    .card { break-inside: avoid; }
    .prop-comp-scroll { flex-wrap: wrap; overflow: visible; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LUXURY DETAIL PAGE - v2
   The agent-grade workspace. Replaces the dark slate hero + accordion
   sections with a cream hero, a 2-column grid (main + sticky right rail),
   and section cards that read like a refined dossier.
   ═══════════════════════════════════════════════════════════════════════════ */

.prop-lux {
    max-width: 84rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-24);
    background: var(--surface-canvas);
    /* min-height pinned to the DYNAMIC viewport height on mobile (100dvh
       shrinks with Safari's URL bar so we don't leave a strip of empty
       cream under the last section when the bar is visible). Falls back
       to 100vh for browsers without dvh support. */
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.prop-lux-hero {
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-8);
    margin-bottom: var(--space-6);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    animation: fadeInUp var(--anim-normal) var(--easing) both;
}
.prop-lux-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold) 30%,
        var(--gold-light) 50%,
        var(--gold) 70%,
        transparent 100%);
}
.prop-lux-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--faint);
    margin-bottom: var(--space-4);
}
.prop-lux-hero-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color var(--anim-fast) var(--easing);
    cursor: pointer;
}
.prop-lux-hero-breadcrumb a:hover { color: var(--gold-dark); }
.prop-lux-hero-breadcrumb-sep {
    color: var(--faint);
    opacity: 0.6;
}

.prop-lux-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
.prop-lux-hero-titles { min-width: 0; flex: 1; }
.prop-lux-hero-address {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    letter-spacing: -0.025em;
    margin-bottom: var(--space-2);
    word-break: break-word;
    overflow-wrap: break-word;
}
.prop-lux-hero-city {
    font-size: var(--text-md);
    color: var(--muted);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
    word-break: break-word;
    overflow-wrap: break-word;
}
.prop-lux-hero-city strong {
    color: var(--text);
    font-weight: var(--weight-semibold);
}
.prop-lux-hero-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Big lead-score chip in the hero */
.prop-lux-hero-score {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-xl);
    background: var(--bg-subtle);
    border: 0.0625rem solid var(--border-light);
    box-shadow: var(--shadow-card);
}
.prop-lux-hero-score--hot {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
}
.prop-lux-hero-score--warm {
    background: rgba(245, 124, 0, 0.08);
    border-color: rgba(245, 124, 0, 0.3);
}
.prop-lux-hero-score--cold {
    background: var(--bg-subtle);
    border-color: var(--border);
}
.prop-lux-hero-score-num {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--text);
}
.prop-lux-hero-score--hot .prop-lux-hero-score-num { color: var(--gold-dark); }
.prop-lux-hero-score--warm .prop-lux-hero-score-num { color: var(--warning); }
.prop-lux-hero-score-tier {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-top: var(--space-2);
}
.prop-lux-hero-score--hot .prop-lux-hero-score-tier { color: var(--gold-dark); }
.prop-lux-hero-score--warm .prop-lux-hero-score-tier { color: var(--warning); }

/* Hero action row */
.prop-lux-hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
/* Hero action buttons use the standard control-height (from .btn) with
   slightly wider horizontal padding for a generous touch target. Avoid
   adding vertical padding - it inflates beyond the locked height. */
.prop-lux-hero-actions .btn { padding: 0 var(--space-5); }

/* ── Stats strip ──────────────────────────────────────────────────────── */
.prop-lux-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-card);
    animation: fadeInUp var(--anim-normal) 0.05s var(--easing) both;
}
.prop-lux-stat {
    padding: var(--space-5) var(--space-4);
    border-right: 0.0625rem solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    /* Match skeleton tile height to prevent upward collapse when
       content replaces the SkeletonStats placeholder. */
    min-height: 5.5rem;
}
.prop-lux-stat:last-child { border-right: none; }
.prop-lux-stat--featured {
    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--gold-muted) 100%);
}
.prop-lux-stat-label {
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prop-lux-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-lux-stat--featured .prop-lux-stat-value { color: var(--gold-dark); }
.prop-lux-stat-sub {
    font-size: var(--text-xs);
    color: var(--faint);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 2-column body ────────────────────────────────────────────────────── */
.prop-lux-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--space-6);
    align-items: flex-start;
}
.prop-lux-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}
.prop-lux-rail {
    position: sticky;
    top: calc(var(--top-nav-h) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Subtract top-nav, top offset, and 6rem bottom for the fixed action bar */
    max-height: calc(100vh - var(--top-nav-h) - var(--space-4) - 6rem);
    overflow-y: auto;
    padding-right: var(--space-1);
}
.prop-lux-rail::-webkit-scrollbar { width: 0.375rem; }
.prop-lux-rail::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: var(--radius-xs);
}

/* ── Section cards ────────────────────────────────────────────────────── */
.prop-lux-section {
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    animation: fadeInUp var(--anim-normal) var(--easing) both;
}
.prop-lux-section-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.0625rem solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: linear-gradient(180deg, var(--surface-card) 0%, var(--bg-subtle) 100%);
}
.prop-lux-section-title-block { min-width: 0; }
.prop-lux-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}
.prop-lux-section-subtitle {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: var(--space-1);
}
.prop-lux-section-action {
    flex-shrink: 0;
}
.prop-lux-section-body {
    padding: var(--space-5);
}

/* ── Lead scoring ────────────────────────────────────────────────────── */
.prop-lux-lead {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: center;
}
.prop-lux-lead-circle {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 0.375rem solid var(--border-light);
    box-shadow: var(--shadow-card);
}
.prop-lux-lead-circle--hot {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
    box-shadow: var(--shadow-card);
}
.prop-lux-lead-circle--warm {
    background: var(--warning-light);
    border-color: var(--warning);
}
.prop-lux-lead-num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.03em;
}
.prop-lux-lead-circle--hot .prop-lux-lead-num { color: var(--gold-dark); }
.prop-lux-lead-circle--warm .prop-lux-lead-num { color: var(--warning); }
.prop-lux-lead-tier {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-top: var(--space-2);
}
.prop-lux-lead-circle--hot .prop-lux-lead-tier { color: var(--gold-dark); }
.prop-lux-lead-info { min-width: 0; }
.prop-lux-lead-headline {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
}
/* Intelligence summary card - the "so what?" banner */
.prop-lux-intel {
    background: linear-gradient(135deg, rgba(181, 148, 42, 0.06) 0%, rgba(181, 148, 42, 0.02) 100%);
    border: 0.0625rem solid rgba(181, 148, 42, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    min-height: 4rem;
}
.prop-lux-intel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.prop-lux-intel-headline {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    color: var(--text);
}
.prop-lux-intel-body {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}
.prop-lux-intel-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.prop-lux-lead-factors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.prop-lux-lead-factor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--gold-muted);
    border: 0.0625rem solid var(--gold-border);
    color: var(--gold-dark);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.prop-lux-lead-factor::before {
    content: '•';
    color: var(--gold);
    font-weight: var(--weight-bold);
}
.prop-lux-lead-prompt {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 0.0625rem solid var(--border-light);
    grid-column: 1 / -1;
}
.prop-lux-lead-prompt-label {
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    color: var(--gold-dark);
    margin-bottom: var(--space-2);
}
.prop-lux-lead-prompt-text {
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--text);
    line-height: var(--leading-snug);
    font-style: italic;
}

/* Score breakdown - factor rows with point values */
.prop-lux-lead-factor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) 0;
}
.prop-lux-lead-factor-pts {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--gold-dark);
    background: rgba(181, 148, 42, 0.1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-left: var(--space-3);
}

/* Opportunity patterns - named plays */
.prop-lux-patterns {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 0.0625rem solid var(--border-light);
    grid-column: 1 / -1;
}
.prop-lux-patterns-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-dark);
    margin-bottom: var(--space-3);
}
.prop-lux-pattern {
    background: rgba(181, 148, 42, 0.04);
    border: 0.0625rem solid rgba(181, 148, 42, 0.15);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.prop-lux-pattern-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.prop-lux-pattern-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--text);
}
.prop-lux-pattern-action {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

/* ── Owner profile ────────────────────────────────────────────────────── */
.prop-lux-owner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
.prop-lux-owner-block { min-width: 0; }
.prop-lux-owner-label {
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: var(--space-2);
}
.prop-lux-owner-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--slate);
    line-height: var(--leading-snug);
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: var(--space-2);
    letter-spacing: -0.01em;
    word-break: break-word;
    overflow-wrap: break-word;
}
.prop-lux-owner-meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.prop-lux-owner-mailing {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    word-break: break-word;
    overflow-wrap: break-word;
}
.prop-lux-owner-mismatch {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-light);
    border: 0.0625rem solid rgba(245, 124, 0, 0.25);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.prop-lux-owner-mismatch::before {
    content: '⚑';
    font-size: var(--text-md);
}
.prop-lux-owner-portfolio {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--gold-muted) 100%);
    border: 0.0625rem solid var(--gold-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    transition: transform var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing);
}
.prop-lux-owner-portfolio:hover {
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-card-hover);
}
.prop-lux-owner-portfolio-num {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--gold-dark);
    line-height: 1;
}
.prop-lux-owner-portfolio-label {
    letter-spacing: 0.05em;
    color: var(--gold-dark);
}
.prop-lux-owner-portfolio-arrow {
    font-size: var(--text-lg);
    color: var(--gold-dark);
}

/* ── Sales history ────────────────────────────────────────────────────── */
.prop-lux-sales-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 0.0625rem solid var(--border-light);
}
.prop-lux-sales-summary-cell { min-width: 0; }
.prop-lux-sales-summary-label {
    letter-spacing: 0.05em;
    color: var(--faint);
    margin-bottom: var(--space-1);
}
.prop-lux-sales-summary-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--slate);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-lux-sales-flags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

/* ── Valuation ────────────────────────────────────────────────────────── */
.prop-lux-avm {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--gold-muted) 100%);
    border: 0.0625rem solid var(--gold-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}
.prop-lux-avm-figure {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--gold-dark);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.prop-lux-avm-label {
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    color: var(--gold-dark);
    margin-bottom: var(--space-1);
}
.prop-lux-avm-band {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}
.prop-lux-avm-confidence {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-dark);
    margin-top: var(--space-2);
}
.prop-lux-value-gap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}
.prop-lux-value-gap-cell { text-align: center; }
.prop-lux-value-gap-label {
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}
.prop-lux-value-gap-value {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.prop-lux-value-gap-value.is-positive { color: var(--success); }
.prop-lux-value-gap-value.is-negative { color: var(--error); }

/* ── KV grid (used in many sections) ──────────────────────────────────── */
.prop-lux-kv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}
.prop-lux-kv {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.prop-lux-kv-label {
    letter-spacing: 0.05em;
    color: var(--faint);
}
.prop-lux-kv-value {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-lux-kv-value.is-money {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--gold-dark);
}
.prop-lux-kv-value.is-multiline {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: var(--leading-snug);
}
.prop-lux-kv-value.is-mono {
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

/* ── Entity template sections ─────────────────────────────────────────── */
.entity-section { margin-bottom: var(--space-8, 2rem); }
.entity-section-title {
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--weight-bold, 700);
    color: var(--text, #1c2331);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-4, 1rem);
    padding-bottom: var(--space-2, 0.5rem);
    border-bottom: 0.0625rem solid var(--border-light, #ebe6dd);
}

/* ── Hazards callout ──────────────────────────────────────────────────── */
.prop-lux-hazard-callout {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--info-light);
    border: 0.0625rem solid rgba(21, 101, 192, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.prop-lux-hazard-callout.is-warn {
    background: var(--warning-light);
    border-color: rgba(245, 124, 0, 0.3);
}
.prop-lux-hazard-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    color: var(--info);
}
.prop-lux-hazard-callout.is-warn .prop-lux-hazard-icon { color: var(--warning); }
.prop-lux-hazard-text {
    flex: 1;
    min-width: 0;
}
.prop-lux-hazard-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--info);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}
.prop-lux-hazard-callout.is-warn .prop-lux-hazard-title { color: var(--warning); }
.prop-lux-hazard-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Demographics bar ─────────────────────────────────────────────────── */
.prop-lux-demo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}
.prop-lux-demo-cell { min-width: 0; }
.prop-lux-demo-label {
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}
.prop-lux-demo-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--slate);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-lux-demo-sub {
    font-size: var(--text-xs);
    color: var(--faint);
    margin-top: var(--space-1);
}

/* ── Right rail cards ─────────────────────────────────────────────────── */
.prop-lux-rail-card {
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-card);
}
.prop-lux-rail-card-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: var(--space-2);
}
.prop-lux-rail-card-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}
.prop-lux-rail-card-sub {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: var(--space-1);
}
.prop-lux-rail-card.is-featured {
    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--gold-muted) 100%);
    border-color: var(--gold-border);
}
.prop-lux-rail-card.is-featured .prop-lux-rail-card-value { color: var(--gold-dark); }

/* Action button list in the rail */
.prop-lux-rail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.prop-lux-rail-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: border-color var(--anim-fast) var(--easing),
                background var(--anim-fast) var(--easing),
                transform var(--anim-fast) var(--easing);
    text-align: left;
    width: 100%;
}
.prop-lux-rail-action:hover {
    border-color: var(--gold);
    background: var(--bg-hover);
    transform: translateX(0.125rem);
}
.prop-lux-rail-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--gold-muted);
    color: var(--gold-dark);
    font-size: var(--text-md);
    flex-shrink: 0;
}
.prop-lux-rail-action-arrow {
    color: var(--faint);
    font-size: var(--text-md);
    transition: transform var(--anim-fast) var(--easing);
}
.prop-lux-rail-action:hover .prop-lux-rail-action-arrow {
    color: var(--gold);
    transform: translateX(0.125rem);
}

/* Activity entry in the rail */
.prop-lux-activity {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.prop-lux-activity-item {
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 0.0625rem solid var(--border-light);
}
.prop-lux-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.prop-lux-activity-dot {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--gold);
    margin-top: var(--space-2);
    box-shadow: 0 0 0 0.1875rem var(--gold-muted);
}
.prop-lux-activity-text {
    flex: 1;
    min-width: 0;
}
.prop-lux-activity-subject {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: var(--leading-snug);
}
.prop-lux-activity-meta {
    font-size: var(--text-xs);
    color: var(--faint);
    margin-top: var(--space-1);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 80em) {
    .prop-lux-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .prop-lux-stat:nth-child(3) { border-right: none; }
    .prop-lux-stat:nth-child(n+4) { border-top: 0.0625rem solid var(--border-light); }
    /* Cell 6 is :last-child (already has no border-right). Also clear
       the right border on cell 4 - it's the last cell in the second row
       and abuts the container border, not another cell. */
    .prop-lux-stat:nth-child(3n) { border-right: none; }
    .prop-lux-demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 64em) {
    .prop-lux-grid { grid-template-columns: 1fr; }
    .prop-lux-rail { position: static; max-height: none; }
    /* Tighter bottom padding on phones - var(--space-16) was leaving a
       visible cream strip under the last section because we don't need
       a 4rem footer gutter at this size. Plus respect the iOS safe-area
       inset so content doesn't sit under the home indicator. */
    .prop-lux {
        padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0rem));
    }
    .prop-lux-hero { padding: var(--space-6); }
    .prop-lux-hero-address { font-size: var(--text-2xl); }
    .prop-lux-owner { grid-template-columns: 1fr; }
    .prop-lux-sales-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prop-lux-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prop-lux-kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40em) {
    .prop-lux-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prop-lux-stat { border-right: none !important; border-bottom: 0.0625rem solid var(--border-light); }
    /* Last row (cells 5-6 of 6) sits against the container border -
       remove the cell border so it doesn't double up. */
    .prop-lux-stat:nth-last-child(-n+2) { border-bottom: none; }
    .prop-lux-hero-top { flex-direction: column-reverse; }
    .prop-lux-hero-score { width: 5rem; height: 5rem; }
    .prop-lux-lead { grid-template-columns: 1fr; text-align: center; }
    .prop-lux-lead-circle { margin: 0 auto; }
    .prop-lux-sales-summary { grid-template-columns: 1fr 1fr; }
    .prop-lux-demo-grid { grid-template-columns: 1fr; }
    .prop-lux-kv-grid { grid-template-columns: 1fr; }
    .prop-lux-section-body { padding: var(--space-4); }
    .prop-lux-section-header { padding: var(--space-4); }

    /* Owner profile: on narrow screens, the title, subtitle, and
       "Other properties by this owner" button add header noise that
       crowds out the only action that actually matters at this size -
       the skip-trace CTA. Hide them and let the in-body owner block
       carry the heading weight. */
    #prop-lux-section-owner .prop-lux-section-title-block,
    #prop-lux-section-owner #prop-lux-owner-portfolio-btn {
        display: none;
    }
    #prop-lux-section-owner .prop-lux-section-header {
        justify-content: flex-start;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   COMPARABLE SALES - sold comparables analysis
   The PropStream-class section that turns the property page into a real
   valuation tool. Stat strip → filter chips → grid of cards → footer.
   Subject parcel is pinned at position 0 with a distinct treatment so
   the user can eyeball it against the matched comps without scrolling.
   ═════════════════════════════════════════════════════════════════════════ */

.prop-lux-comps-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.prop-lux-comps-window-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
    font-weight: var(--weight-bold);
}
.prop-lux-comps-window {
    display: inline-flex;
    gap: var(--space-1);
    background: var(--surface-card);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    border: 0.0625rem solid var(--border-light);
}
.prop-lux-comps-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.625rem;
    min-height: 1.625rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    vertical-align: middle;
    transition: background var(--anim-fast) var(--easing), color var(--anim-fast) var(--easing);
}
.prop-lux-comps-chip:hover {
    color: var(--slate);
    background: var(--bg-subtle);
}
.prop-lux-comps-chip.is-active {
    background: var(--gold);
    color: var(--slate);
    box-shadow: var(--shadow-sm);
}
.prop-lux-comps-radius {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}
.prop-lux-comps-radius label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
    font-weight: var(--weight-bold);
}
.prop-lux-comps-radius .form-input {
    width: auto;
    min-width: 5rem;
}

/* ── Aggregate stats bar ────────────────────────────────────────────── */
.prop-lux-comps-stats {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: 0.0625rem;
    background: var(--border-light);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.prop-lux-comps-stat {
    background: var(--surface-card);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.prop-lux-comps-stat.is-headline {
    background: linear-gradient(135deg, var(--surface-card) 0%, var(--bg-subtle) 100%);
}
.prop-lux-comps-stat-label {
    letter-spacing: 0.06em;
    color: var(--faint);
    font-weight: var(--weight-bold);
}
.prop-lux-comps-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--slate);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-lux-comps-stat.is-headline .prop-lux-comps-stat-value {
    font-size: var(--text-xl);
    color: var(--gold-dark);
}
.prop-lux-comps-stat-sub {
    font-size: var(--text-xs);
    color: var(--muted);
}

/* ── Comp grid ──────────────────────────────────────────────────────── */
.prop-lux-comps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.prop-lux-comp-card {
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing),
                border-color var(--anim-fast) var(--easing);
}
.prop-lux-comp-card:hover {
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border);
}
.prop-lux-comp-card.is-subject {
    background: linear-gradient(135deg, var(--surface-card) 0%, var(--bg-subtle) 100%);
    border-color: var(--gold);
    border-width: 0.125rem;
}
.prop-lux-comp-card.is-strong { border-left: 0.25rem solid var(--success, #2e7d32); }
.prop-lux-comp-card.is-medium { border-left: 0.25rem solid var(--gold, #b5942a); }
.prop-lux-comp-card.is-weak   { border-left: 0.25rem solid var(--muted, #9a9388); }

.prop-lux-comp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.prop-lux-comp-card-tag {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    min-height: 1.25rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--bg-subtle);
    vertical-align: middle;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.prop-lux-comp-card.is-subject .prop-lux-comp-card-tag {
    background: var(--gold);
    color: var(--slate);
}
.prop-lux-comp-card-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--slate);
    background: var(--bg-subtle);
    vertical-align: middle;
    min-width: 1.875rem;
    text-align: center;
}
.prop-lux-comp-card.is-strong .prop-lux-comp-card-score {
    background: var(--success-bg, #e8f5e9);
    color: var(--success, #2e7d32);
}
.prop-lux-comp-card-address {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.prop-lux-comp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.prop-lux-comp-card-meta span {
    white-space: nowrap;
}
.prop-lux-comp-card-price {
    border-top: 0.0625rem dashed var(--border-light);
    padding-top: var(--space-2);
    margin-top: auto;
}
.prop-lux-comp-card-price-figure {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--gold-dark);
    font-variant-numeric: tabular-nums;
}
.prop-lux-comp-card-price-date {
    font-size: var(--text-xs);
    color: var(--muted);
}
.prop-lux-comp-card-derived {
    display: flex;
    gap: var(--space-2);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-bold);
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.prop-lux-comps-footer {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: var(--leading-relaxed);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border: 0.0625rem dashed var(--border-light);
    border-radius: var(--radius-md);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 64em) {
    .prop-lux-comps-stats { grid-template-columns: 1.4fr 1fr 1fr; }
    .prop-lux-comps-stats .prop-lux-comps-stat:nth-child(n+4) { display: none; }
}
@media (max-width: 40em) {
    .prop-lux-comps-stats { grid-template-columns: 1fr 1fr; }
    .prop-lux-comps-stats .prop-lux-comps-stat.is-headline { grid-column: 1 / -1; }
    .prop-lux-comps-grid { grid-template-columns: 1fr; }
    .prop-lux-comps-controls { gap: var(--space-2); }
    .prop-lux-comps-radius { margin-left: 0; width: 100%; }
}

/* ═════════════════════════════════════════════════════════════════════════
   INTELLIGENCE SOURCES
   The data source catalog rendered as a card grid. Each card represents
   one registered DataSource and lists every fact that source contributes
   for this parcel. Cards are color-accented by category.
   ═════════════════════════════════════════════════════════════════════════ */

.prop-lux-sources-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.prop-lux-sources-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--surface-card) 0%, var(--bg-subtle) 100%);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
}
.prop-lux-sources-summary-headline {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}
.prop-lux-sources-summary-count {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--gold-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.prop-lux-sources-summary-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--muted);
    font-weight: var(--weight-medium);
}
.prop-lux-sources-summary-cats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.prop-lux-sources-summary-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    min-height: 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-pill);
    padding: 0 0.625rem;
    vertical-align: middle;
    white-space: nowrap;
}
.prop-lux-sources-summary-cat strong {
    font-family: var(--font-mono);
    color: var(--slate);
    font-weight: var(--weight-bold);
}

/* ── Card grid ── */
.prop-lux-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-3);
}

.prop-lux-source-card {
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing),
                transform var(--anim-fast) var(--easing);
    border-left-width: 0.1875rem;
}
.prop-lux-source-card:hover {
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-md);
}
.prop-lux-source-card.accent-gold    { border-left-color: var(--gold); }
.prop-lux-source-card.accent-slate   { border-left-color: var(--slate); }
.prop-lux-source-card.accent-warning { border-left-color: var(--warning, #f57c00); }

.prop-lux-source-card-head {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: var(--space-3);
    align-items: center;
}
.prop-lux-source-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: var(--gold-muted);
    color: var(--gold-dark);
    border: 0.0625rem solid var(--gold-border);
}
.accent-slate .prop-lux-source-card-icon {
    background: rgba(28, 35, 49, 0.06);
    color: var(--slate);
    border-color: rgba(28, 35, 49, 0.12);
}
.accent-warning .prop-lux-source-card-icon {
    background: rgba(245, 124, 0, 0.08);
    color: var(--warning, #f57c00);
    border-color: rgba(245, 124, 0, 0.22);
}
.prop-lux-source-card-titles { min-width: 0; }
.prop-lux-source-card-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-lux-source-card-cat {
    font-family: var(--font-body);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--faint);
    font-weight: var(--weight-bold);
    margin-top: 0.125rem;
}
.prop-lux-source-card-conf {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: var(--bg-subtle);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-sm);
    align-self: flex-start;
}
.prop-lux-source-card-conf.is-high {
    color: var(--success);
    background: var(--success-light);
}
.prop-lux-source-card-conf.is-low {
    color: var(--warning, #f57c00);
    background: rgba(245, 124, 0, 0.08);
}

/* ── Facts list inside each card ── */
.prop-lux-source-card-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prop-lux-source-fact {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding: 0.5rem 0;
    border-bottom: 0.0625rem dashed var(--border-light);
    align-items: baseline;
}
.prop-lux-source-fact:last-child { border-bottom: 0; }
.prop-lux-source-fact-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prop-lux-source-fact-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--slate);
    text-align: right;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.prop-lux-source-fact-yes {
    color: var(--success);
    font-weight: var(--weight-bold);
}
.prop-lux-source-fact-no {
    color: var(--faint);
}
.prop-lux-source-fact-link {
    color: var(--gold-dark);
    text-decoration: none;
    border-bottom: 0.0625rem solid currentColor;
}
.prop-lux-source-fact-link:hover { color: var(--gold); }
.prop-lux-source-fact-detail {
    grid-column: 1 / -1;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--faint);
    line-height: var(--leading-snug);
    margin-top: 0.25rem;
    font-style: italic;
}

/* ── Card footer with source link ── */
.prop-lux-source-card-foot {
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 0.0625rem solid var(--border-light);
    font-size: var(--text-xs);
}
.prop-lux-source-card-foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.625rem;
    transition: color var(--anim-fast) var(--easing);
}
.prop-lux-source-card-foot a:hover { color: var(--gold-dark); }

@media (max-width: 40em) {
    .prop-lux-sources-grid { grid-template-columns: 1fr; }
    .prop-lux-sources-summary { flex-direction: column; align-items: flex-start; }
}


/* ═════════════════════════════════════════════════════════════════════════
   TAX & INVESTMENT ANALYSIS
   Investment-grade metrics and contextual signals for deal evaluation.
   ═════════════════════════════════════════════════════════════════════════ */

.prop-lux-tax-signals {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 0.0625rem solid var(--border-light);
}
.prop-lux-tax-signal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text);
    border: 0.0625rem solid var(--border-light);
    background: var(--surface-card);
}
.prop-lux-tax-signal svg {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}
.prop-lux-tax-signal--success {
    border-color: rgba(46, 125, 50, 0.2);
    background: rgba(46, 125, 50, 0.04);
}
.prop-lux-tax-signal--success svg { color: var(--success, #2e7d32); }
.prop-lux-tax-signal--warning {
    border-color: rgba(245, 124, 0, 0.2);
    background: rgba(245, 124, 0, 0.04);
}
.prop-lux-tax-signal--warning svg { color: var(--warning, #f57c00); }
.prop-lux-tax-signal--info {
    border-color: rgba(21, 101, 192, 0.15);
    background: rgba(21, 101, 192, 0.03);
}
.prop-lux-tax-signal--info svg { color: var(--info, #1565c0); }

@media (max-width: 40em) {
    .prop-lux-tax-signal {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }
}

/* ── Print-only comprehensive spec sheet ──
   Rendered by _renderPrintSpec in property.js as a hidden section
   on screen. The @media print rule below promotes it to visible so
   a printed report carries the same 42 fields the bulk CSV export
   produces, organized into the same groups. Keeps screen UX
   unchanged while satisfying the user's "print in the format I
   specified" requirement. */
.prop-lux-print-spec { display: none; }
.prop-lux-print-spec-group {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-size: 10pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #706b63;
    margin: 0.18in 0 0.06in;
    padding-bottom: 0.04in;
    border-bottom: 0.5pt solid #ddd5c6;
}
.prop-lux-print-spec-group:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   PRINT STYLES - PROPERTY REPORT (.prop-lux)
   ──────────────────────────────────────────────────────────────────
   Triggered by body.is-printing-report (set in _printReport before
   window.print()). Builds a four-act report:
     1. Cover page  (horizontal logo + address + prepared date)
                    -- styled in app.css (.print-cover block)
     2. Snapshot    (hero + key metrics + intel card)
     3. Detail      (owner, sales, valuation, tax, comps -- existing
                     screen sections, restyled for paper)
     4. Spec sheet  (the 42-field comprehensive spec, last page)

   Conventions
   ──────────────────────────────────────────────────────────────────
   • Paper-aware units: every dimension is in `in`, `pt`, or `em` so
     a Save-as-PDF at A4 (or Legal, or Tabloid) reflows cleanly.
   • Page-break discipline: every section card carries
     `break-inside: avoid` + `orphans: 3; widows: 3` so a card never
     splits a label from its value, and no section starts with a
     dangling header at the bottom of a page.
   • Color: the gold accent is preserved (with print-color-adjust:
     exact) on the cover bar, score badges, and tier chips - those
     are the only saturated colors. Everything else is greyscale-
     friendly so a B&W laser still reads well.
   • Empty data is invisible: KV rows that hit a placeholder are
     hidden by _hidePrintEmpties (JS, runs once before window.print),
     and _luxKv has its own value guard. The reader never sees
     scaffolding for data the parcel doesn't have.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    /* Page setup -- Letter portrait by default; A4 reflows via the
       size: A4 query below so a "Save as PDF" with A4 selected still
       gives clean margins instead of letterboxed content. */
    @page {
        size: Letter portrait;
        margin: 0.6in 0.55in 0.7in 0.55in;
    }
    @page :first {
        /* First page has the .print-cover block above the snapshot,
           so it gets a slightly larger top margin to let the cover
           breathe. */
        margin-top: 0.75in;
    }

    body, html {
        background: #ffffff !important;
        color: #1c2331 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── App chrome hidden ── only the report content reaches paper. */
    body.is-printing-report .top-nav,
    body.is-printing-report .sidebar-nav,
    body.is-printing-report .sidebar-collapse-btn,
    body.is-printing-report .command-palette-overlay,
    body.is-printing-report .mobile-nav-overlay,
    body.is-printing-report #toast-container,
    body.is-printing-report .offline-banner,
    body.is-printing-report .boot-splash,
    body.is-printing-report .prop-lux-rail,
    body.is-printing-report .prop-lux-hero-actions,
    body.is-printing-report .prop-lux-intel-actions,
    body.is-printing-report .prop-lux-section-toc,
    body.is-printing-report .prop-lux-floating-cta,
    body.is-printing-report .prop-lux-tab,
    body.is-printing-report #site-header,
    body.is-printing-report .site-nav,
    body.is-printing-report .platform-crumbs,
    body.is-printing-report button,
    body.is-printing-report .btn,
    body.is-printing-report .modal-overlay,
    body.is-printing-report .skeleton,
    body.is-printing-report .loading,
    body.is-printing-report .loading-spinner,
    body.is-printing-report .prop-lux-map-embed,
    body.is-printing-report iframe,
    body.is-printing-report [data-no-print] {
        display: none !important;
    }

    /* ── Layout reset ── full-width report, no chrome offsets. */
    body.is-printing-report .main-content,
    body.is-printing-report .app-shell,
    body.is-printing-report .view-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    body.is-printing-report .prop-lux {
        padding: 0 !important;
        max-width: 100% !important;
        background: #ffffff !important;
        min-height: 0 !important;
    }
    body.is-printing-report .prop-lux-grid {
        display: block !important;
    }
    body.is-printing-report .prop-lux-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ── Typography ── paper-legible sizing + a typographic safety net
       that keeps headings out of orphan/widow territory. */
    body.is-printing-report,
    body.is-printing-report .prop-lux {
        font-family: 'Source Sans 3', Arial, sans-serif;
        font-size: 9.5pt;
        line-height: 1.45;
        color: #1c2331;
        orphans: 3;
        widows: 3;
    }
    body.is-printing-report h1,
    body.is-printing-report h2,
    body.is-printing-report h3,
    body.is-printing-report .prop-lux-section-title,
    body.is-printing-report .prop-lux-hero-title {
        font-family: 'Playfair Display', Georgia, serif;
        color: #1c2331;
        break-after: avoid;
        page-break-after: avoid;
    }
    body.is-printing-report .prop-lux-hero-title {
        font-size: 20pt !important;
        line-height: 1.1;
        margin: 0 0 0.04in !important;
    }
    body.is-printing-report .prop-lux-section-title,
    body.is-printing-report h2 { font-size: 13pt !important; }
    body.is-printing-report h3 { font-size: 11pt !important; }
    body.is-printing-report p { margin: 0 0 0.06in; }

    /* ── Hero strip ── compact, single-line stat row beneath the
       address. Gold accent kept; shadows + animations stripped. */
    body.is-printing-report .prop-lux-hero {
        box-shadow: none !important;
        border: 0.5pt solid #d5cfc5 !important;
        border-left: 3pt solid #b5942a !important;
        border-radius: 0 !important;
        padding: 0.22in 0.28in !important;
        margin: 0 0 0.2in !important;
        animation: none !important;
        background: #fdfbf6 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.is-printing-report .prop-lux-hero-city {
        font-size: 9pt;
        color: #4a4842;
        margin-top: 0.04in;
    }
    body.is-printing-report .prop-lux-hero-score {
        background: #1c2331 !important;
        color: #fff !important;
    }
    body.is-printing-report .prop-lux-hero-score--hot,
    body.is-printing-report .prop-lux-hero-score--super_hot,
    body.is-printing-report .prop-lux-hero-score--warm {
        background: #b5942a !important;
        color: #fff !important;
    }
    body.is-printing-report .prop-lux-hero-score-num {
        font-size: 22pt !important;
    }
    body.is-printing-report .prop-lux-hero-score-tier {
        font-size: 7.5pt;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* ── Stats strip ── 5-up grid of headline metrics. */
    body.is-printing-report .prop-lux-stats {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.08in !important;
        margin: 0 0 0.2in !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    body.is-printing-report .prop-lux-stat {
        border: 0.5pt solid #e6e1d7 !important;
        border-radius: 0 !important;
        padding: 0.1in 0.12in !important;
        background: #ffffff !important;
        animation: none !important;
    }
    body.is-printing-report .prop-lux-stat-label {
        font-size: 6.5pt !important;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #706b63;
        margin-bottom: 0.04in;
    }
    body.is-printing-report .prop-lux-stat-value {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 13pt !important;
        font-weight: 700;
        color: #1c2331;
        line-height: 1.05;
    }
    body.is-printing-report .prop-lux-stat-sub {
        font-size: 6.5pt !important;
        color: #706b63;
        margin-top: 0.03in;
    }
    body.is-printing-report .prop-lux-stat--featured {
        border-left: 2.5pt solid #b5942a !important;
        background: #fdfbf6 !important;
    }

    /* ── Intel headline card ── tight pull-quote style. */
    body.is-printing-report .prop-lux-intel {
        background: #fdfbf6 !important;
        border: 0.5pt solid #e6e1d7 !important;
        border-left: 3pt solid #b5942a !important;
        border-radius: 0 !important;
        padding: 0.18in 0.22in !important;
        margin: 0 0 0.2in !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.is-printing-report .prop-lux-intel-headline {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 12pt !important;
        line-height: 1.2;
        font-weight: 700;
    }
    body.is-printing-report .prop-lux-intel-body {
        font-size: 9pt;
        color: #2a2c3a;
        margin-top: 0.06in;
    }

    /* ── Sections ── flat cards, page-break-safe, light separators. */
    body.is-printing-report .prop-lux-section,
    body.is-printing-report .prop-lux-tax-card,
    body.is-printing-report .card {
        box-shadow: none !important;
        border: 0 !important;
        border-top: 0.5pt solid #e6e1d7 !important;
        border-radius: 0 !important;
        margin: 0 0 0.16in !important;
        padding: 0.16in 0 0.08in !important;
        background: #ffffff !important;
        break-inside: avoid;
        page-break-inside: avoid;
        animation: none !important;
    }
    body.is-printing-report .prop-lux-section-header {
        margin-bottom: 0.1in;
    }
    body.is-printing-report .prop-lux-section-subtitle {
        font-size: 8.5pt;
        color: #706b63;
        margin-top: 0.02in;
    }

    /* ── Key-value rows ── tight 2-col body grid with right-aligned
       values. Labels grayscale, values black for scanability. */
    body.is-printing-report .prop-lux-kv-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 0.3in !important;
        row-gap: 0.03in !important;
    }
    body.is-printing-report .prop-lux-kv {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.04in 0;
        border-bottom: 0.25pt dotted #e6e1d7;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.is-printing-report .prop-lux-kv-label {
        font-size: 8.5pt;
        color: #4a4842;
        font-weight: 600;
    }
    body.is-printing-report .prop-lux-kv-value {
        font-size: 9pt;
        color: #1c2331;
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-weight: 500;
    }
    body.is-printing-report .prop-lux-kv-value.is-money {
        font-family: 'DM Mono', 'Source Code Pro', monospace;
        font-size: 8.5pt;
    }

    /* ── Lead score breakdown bars (kept colored for impact). */
    body.is-printing-report .prop-lux-score-bar,
    body.is-printing-report .prop-lux-score-signal {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.is-printing-report .prop-lux-score-signal-bar {
        background: #b5942a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Tables (sales history, comps) ── grayscale strips, clean
       baselines, no zebra striping. */
    body.is-printing-report table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
        break-inside: auto;
    }
    body.is-printing-report thead { display: table-header-group; }
    body.is-printing-report tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.is-printing-report th {
        text-align: left;
        font-size: 7.5pt;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #706b63;
        border-bottom: 0.75pt solid #1c2331;
        padding: 0.06in 0.08in;
    }
    body.is-printing-report td {
        padding: 0.05in 0.08in;
        border-bottom: 0.25pt solid #e6e1d7;
        font-variant-numeric: tabular-nums;
    }

    /* ── Charts / canvas ── allow but cap height; printed bar charts
       beat a 3-inch surprise. */
    body.is-printing-report canvas {
        max-height: 2.6in !important;
        max-width: 100% !important;
    }

    /* ── Inline link URLs ── show the href next to anchors so the
       printed report is still actionable. Internal app routes are
       excluded (they aren't useful on paper). */
    body.is-printing-report .prop-lux a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 7pt;
        color: #6b6760;
        word-break: break-all;
    }
    body.is-printing-report .prop-lux a[href^="#"]::after,
    body.is-printing-report .prop-lux a[href^="/"]::after,
    body.is-printing-report .prop-lux a[href^="javascript"]::after {
        content: '';
    }

    /* ── Comprehensive spec sheet (last act) ──
       Lives on its own page so it reads like an appendix. The
       _renderPrintSpec JS function builds the markup with the same
       10 groups the CSV export uses; CSS here promotes it from
       hidden-on-screen to a 2-column grid on paper. */
    body.is-printing-report .prop-lux-print-spec {
        display: block !important;
        break-before: page;
        page-break-before: always;
        border: 0 !important;
        padding-top: 0 !important;
    }
    body.is-printing-report .prop-lux-print-spec .prop-lux-section-title {
        font-size: 15pt !important;
        margin-bottom: 0.02in !important;
    }
    body.is-printing-report .prop-lux-print-spec-group {
        font-family: 'Source Sans 3', Arial, sans-serif;
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #b5942a;
        margin: 0.16in 0 0.06in;
        padding-bottom: 0.04in;
        border-bottom: 0.75pt solid #1c2331;
        break-after: avoid;
        page-break-after: avoid;
    }
    body.is-printing-report .prop-lux-print-spec-group:first-child {
        margin-top: 0;
    }
    body.is-printing-report .prop-lux-print-spec .prop-lux-kv-grid {
        column-gap: 0.4in !important;
    }

    /* ── A4 reflow ──
       Save-as-PDF defaults vary by locale. When the user picks A4,
       drop the column gap a hair so 8-character money values still
       fit two-up without overflow. */
    @media (max-width: 8.27in) {
        body.is-printing-report .prop-lux-stats {
            grid-template-columns: repeat(3, 1fr) !important;
        }
        body.is-printing-report .prop-lux-kv-grid,
        body.is-printing-report .prop-lux-print-spec .prop-lux-kv-grid {
            column-gap: 0.3in !important;
        }
    }
}