.compare-hero {
        text-align: center;
        padding: 2rem 0 1rem;
    }
    .compare-hero h1 {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }
    .compare-hero p {
        color: var(--text-light);
        max-width: 600px;
        margin: 0 auto;
    }

    /* Search box */
    .compare-search-wrap {
        max-width: 480px;
        margin: 1.5rem auto;
        position: relative;
    }
    .compare-search-wrap input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid var(--border);
        border-radius: 8px;
        font-size: 1rem;
        outline: none;
        transition: border-color 0.2s;
    }
    .compare-search-wrap input:focus {
        border-color: var(--primary-light);
    }
    .compare-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 60vh;
        overflow-y: auto;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        /* High z-index so the dropdown always covers the comparison table
           below it, especially on mobile where the table would otherwise
           bleed through the dropdown background. */
        z-index: 1000;
    }
    .compare-dropdown.open { display: block; }
    @media (max-width: 768px) {
        .compare-dropdown {
            max-height: 50vh;
        }
    }
    .compare-dd-item {
        display: block;
        width: 100%;
        text-align: left;
        font-family: inherit;
        color: inherit;
        background: white;
        border: 0;
        padding: 0.6rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
    }
    .compare-dd-item:last-child { border-bottom: none; }
    .compare-dd-item:hover { background: #edf2f7; }
    .compare-dd-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: #edf2f7; }
    .compare-dd-item .dd-district {
        color: var(--text-light);
        font-size: 0.8rem;
    }
    .compare-dd-item .dd-score {
        float: right;
        font-weight: 600;
        font-size: 0.85rem;
    }

    /* Limit message */
    .compare-limit {
        text-align: center;
        color: var(--text-light);
        font-size: 0.9rem;
        margin-bottom: 1rem;
        display: none;
    }
    .compare-limit.visible { display: block; }

    /* Empty state */
    .compare-empty {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--text-light);
    }
    .compare-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

    /* Table wrapper for horizontal scroll */
    .compare-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1.5rem 0;
    }
    .compare-table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
    }
    .compare-table th,
    .compare-table td {
        padding: 0.6rem 0.75rem;
        text-align: center;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        font-size: 0.9rem;
    }
    .compare-table th {
        background: #f7fafc;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .compare-table th:first-child,
    .compare-table td:first-child {
        text-align: left;
        font-weight: 600;
        min-width: 150px;
        background: #f7fafc;
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .compare-table th:first-child { z-index: 3; }

    .compare-table .row-label { color: var(--text); }
    .compare-table .section-header {
        background: var(--primary);
        color: white;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .compare-table .section-header td { background: var(--primary); color: white; }

    /* Score bars in cells */
    .cell-bar-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .cell-bar {
        width: 60px;
        height: 6px;
        background: var(--border);
        border-radius: 3px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .cell-bar-fill {
        height: 100%;
        border-radius: 3px;
    }
    .cell-score { font-weight: 600; min-width: 28px; }

    /* Best/worst highlighting */
    .cell-best { background: #c6f6d5; }
    .cell-worst { background: #fed7d7; }

    /* Remove button */
    .btn-remove {
        background: none;
        border: 1px solid #e53e3e;
        color: #e53e3e;
        padding: 0.25rem 0.6rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.8rem;
    }
    .btn-remove:hover { background: #fed7d7; }

    /* Street name link in header */
    .col-street-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--primary);
    }
    .col-street-name a { color: var(--primary); }
    .col-district {
        font-size: 0.8rem;
        color: var(--text-light);
        font-weight: 400;
    }

    /* DNA tags */
    .cell-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: center; }
    .cell-tags .tag { font-size: 0.7rem; padding: 2px 6px; }

    /* Warnings badge */
    .warn-badge {
        display: inline-block;
        background: #fefcbf;
        color: #744210;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    .warn-badge.warn-none { background: #c6f6d5; color: #22543d; }

    @media (max-width: 768px) {
        .compare-hero h1 { font-size: 1.35rem; }
        .compare-table th, .compare-table td { padding: 0.5rem; font-size: 0.8rem; }
        .cell-bar { width: 40px; }
    }

.compare-table-wrap { display: none; }