/* ==========================================================================
   COMPARATOR / DECISION ENGINE SPECIFIC STYLES
   ========================================================================== */

/* Comparator-Specific Overrides to prevent layering bugs */
.ci-role-menu, .loc-menu-dropdown { 
    z-index: 2000 !important; 
} 

.ci-role-empty { 
    padding: 16px 10px; 
    color: var(--text-sub); 
    font-size: .82rem; 
    text-align: center; 
}

/* Interactive Tool Card Layering */
.tool-container-accent#comparator-input-card {
    position: relative;
    z-index: 50;
    overflow: visible !important;
}

.tool-container-accent#comparator-input-card ~ #decision-engine-section,
.tool-container-accent#comparator-input-card ~ #comparison-results {
    position: relative;
    z-index: 1;
}

/* Synthesis Summary Banner */
.comparison-summary-banner {
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    display: none; 
    font-size: 0.95rem;
    color: var(--navy);
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}

.summary-highlight {
    font-weight: 800;
    color: var(--accent-green);
    font-size: 1.05rem;
}

/* Table & Matrix Formatting */
.comparison-matrix-wrap { 
    overflow-x: auto; 
}

#insights-matrix-table { 
    width: 100%; 
}

#insights-matrix-table th, 
#insights-matrix-table td { 
    vertical-align: middle; 
    padding: 12px 10px; 
}

#insights-matrix-table th:first-child, 
#insights-matrix-table td:first-child { 
    text-align: left; 
}

/* Mobile Comparison Cards */
.comparison-mobile-list { 
    display: none; 
}

.comparison-mobile-card { 
    border: 1px solid var(--border); 
    border-radius: var(--radius-md); 
    background: var(--bg-card); 
    padding: 14px; 
    margin-bottom: 12px; 
}

.comparison-mobile-title { 
    color: var(--navy); 
    font-weight: 800; 
    font-size: .95rem; 
    line-height: 1.25; 
}

.comparison-mobile-role { 
    color: var(--primary); 
    font-size: .76rem; 
    font-weight: 700; 
    line-height: 1.35; 
    margin-top: 3px; 
}

.comparison-mobile-metrics { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
    margin-top: 13px; 
}

.comparison-mobile-metric { 
    padding: 9px 8px; 
    background: var(--bg-subtle); 
    border: 1px solid var(--border-light); 
    border-radius: var(--radius-sm); 
    min-width: 0; 
}

.comparison-mobile-label { 
    display: block; 
    color: var(--text-muted); 
    font-size: .64rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: .035em; 
    line-height: 1.15; 
}

.comparison-mobile-value { 
    display: block; 
    margin-top: 4px; 
    color: var(--navy); 
    font-size: .94rem; 
    font-weight: 800; 
    line-height: 1.2; 
    overflow-wrap: anywhere; 
}

.comparison-mobile-value.primary { color: var(--primary); }
.comparison-mobile-value.green { color: var(--accent-green); }

.comparison-mobile-h1b { 
    margin-top: 9px; 
    padding: 9px 10px; 
    border: 1px solid var(--border-light); 
    border-radius: var(--radius-sm); 
    font-size: .74rem; 
    line-height: 1.35; 
    color: var(--text-sub); 
}

.comparison-mobile-detail { margin-top: 9px; }
.comparison-mobile-detail summary { 
    cursor: pointer; 
    color: var(--primary); 
    font-size: .73rem; 
    font-weight: 800; 
}
.comparison-mobile-detail-body { 
    margin-top: 9px; 
    padding-top: 9px; 
    border-top: 1px solid var(--border-light); 
}

/* Responsive Matrix Switching */
@media (max-width: 760px) {
    .comparison-matrix-wrap { display: none; }
    .comparison-mobile-list { display: block; }
}