/* Constitution Comparison — district-paired incumbent/challenger cards.
   Mirrors candidate-comparison.css exactly, same placeholder colors/TODOs.
   NOTE: source file had "flex-direction: column" / "grid-template-columns"
   (invalid CSS — likely a redaction/find-replace artifact). Corrected here
   to "column" / "grid-template-columns"; flagged in chat, not fixed in the
   original file. */

.cmg-cap-wrap {
    width: 100%;
}

.cmg-cap-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.cmg-cap-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cmg-cap-chamber-toggle {
    display: flex;
    gap: 4px;
}

.cmg-cap-chamber-btn {
    min-width: 90px;
    padding: 6px 14px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
	margin:0px;
    font-family: acumin-pro, "Roboto", Helvetica, Arial, Verdana, sans-serif !important;
}

.cmg-cap-chamber-btn.active {
    background: #37308d;
    color: #fff;
    border-color: #1d4ed8;
}
.cmg-btn-clear{
	padding: 8px 10px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1.05rem !important;
    color: #475569;
    cursor: pointer;
    height: auto;
    transition: background 0.15s, color 0.15s;
    align-self: flex-end;
    font-family: acumin-pro, "Roboto", Helvetica, Arial, Verdana, sans-serif !important;
}
.cmg-cap-honor-roll-label {
    display: flex;
    align-items: center;
    gap: 6px;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
	color: #475569;
	border: 1px solid #cbd5e1;
    padding: 8px 11px;
    border-radius: 5px;
	margin-bottom:0px;
	font-size:16.8px;
}

.cmg-cap-honor-roll-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: #facc15; /* TODO: match to your actual Honor Roll yellow */
    color: #000;
    font-weight: 700;
    font-size: 0.75em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    z-index: 2;
	text-align:center;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}

.cmg-cap-active-filters {
    margin-bottom: 12px;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
	color:#ffffff;
}

.cmg-cap-chip {
	display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px 4px 12px;
    border-radius: 999px;
    font-family: acumin-pro, "Roboto", Helvetica, Arial, Verdana, sans-serif !important;
}

.cmg-cap-chip-remove {
	background: transparent;
    border: none;
    color: #3730a3;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 50%;
}

.cmg-cap-loading,
.cmg-cap-results-status,
.cmg-cap-no-results {
    margin-bottom: 12px;
}

/* District container — full width, stacked vertically, one per race */
.cmg-cap-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
#cmg-cap-cards-wrap .cmg-cap-candidate-photo {
    width: 100% !important;
    max-width: 160px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 auto 12px auto;
    display: block;
}

#cmg-cap-cards-wrap .cmg-cap-field {
    display: block !important;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9em;
}
.cmg-cap-district-pair {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

/* District headline — full width, sits above the 2-column comparison */
.cmg-cap-district-label {
    width: 100%;
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}

/* Two-column comparison — incumbent and challenger side by side */
.cmg-cap-pair-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* Individual candidate card — vertical stack in the specified field order */
.cmg-cap-candidate-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
	position: relative;
}

.cmg-cap-candidate-role {
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ab121c;
    margin-bottom: 10px;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}
img.cmg-cap-candidate-photo{
    width: 322px!important;
}
.cmg-cap-candidate-photo {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 auto 12px auto;
    display: block;
}

.cmg-cap-candidate-name {
    font-weight: 700;
    font-size: 1.15em;
    display: block;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
	text-align:center;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}

/* Labeled field rows — District, Chamber, Party, Towns, Score */
.cmg-cap-field {
    display: block;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9em;
	text-align:center;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}

.cmg-cap-field:last-of-type {
    border-bottom: none;
}

.cmg-cap-field-label {
    color: #64748b; /* TODO: replace with existing muted-text color */
    font-weight: 600;
    flex-shrink: 0;
}

.cmg-cap-field-value {
    text-align: right;
}

.cmg-cap-candidate-score {
    font-weight: 700;
}

/* Report Card / Questionnaire buttons — end of card */
.cmg-cap-candidate-buttons {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cmg-cap-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    flex: 1;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}

.cmg-cap-btn-report-card {
    background: #37308d;
    color: #fff;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}
.cmg-cap-btn-report-card:hover {
    color: #fff;
}

.cmg-cap-btn-questionnaire {
    background: #37308d;
    color: #ffffff;
    border: 1px solid #cbd5e1;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}
a.cmg-cap-btn.cmg-cap-btn-website {
    background: #37308d;
    color: #ffffff;
    border: 1px solid #cbd5e1;
	font-family: acumin-pro,"Roboto", Helvetica, Arial, Verdana, sans-serif!important;
}
@media (max-width: 700px) {
    .cmg-cap-pair-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .cmg-cap-candidate-buttons {
        display:block;
    }
	.cmg-cap-btn {
        display:block;
	}
	.select2-container{
		width:100%!important;
	}
	.cmg-cap-honor-roll-label{
		width:100%!important;
	}
}