/* ==========================================================
   CATTLE CALL — Election Survey Styles
   Scoped to .cattle-call-page. Uses theme design tokens.
   ========================================================== */

/* ---- Local variable aliases ---- */
.cattle-call-page {
    --cc-red:         var(--tx-red);
    --cc-red-dark:    var(--tx-red-dark);
    --cc-blue:        var(--e-global-color-accent);
    --cc-blue-light:  #5a8da8;
    --cc-neutral:     #6b7280;
    --cc-bg:          #ffffff;
    --cc-surface:     #ffffff;
    --cc-text:        #1a1a1a;
    --cc-text-dim:    #6b7280;
    --cc-border:      #e5e7eb;
    --cc-hairline:    rgba(0, 0, 0, 0.06);
    --cc-skull:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425.04 305.91'%3E%3Cpath d='M35.48,305.85c-2.52,0-4.56-2.03-4.64-3.27-.09-1.43,2.02-4.16,3.47-4.18l8.82-.15.99-8.55c-1.58-.87-3.41-1.71-4.2-2.67-.91-1.12-.6-5.35.2-6.57,19.9-30.05,5.17-52.02,17.95-64.83,3.32-3.32,6.03-6.59,5.32-11.62l-2.7-19.07c-3.81-26.91-.91-53.82,13.09-77.69-14.57,5.52-17.6,32.4-19.75,45.89-2.51,15.68-6.08,30.06-12.15,44.85-2.91,7.08,8.28,19.03-2.03,37.29l-.35,17.63c-.09,4.33-3.8,8.89-6.78,11.01l-1.22-15.06c-2.14,6.66-3.2,13.1-6.72,19-4.18,7.03-12.12,11.9-20.2,8.33,7.62-5.12,12.59-11.62,12.01-20.3-3.96,4.41-9.5,7.65-15.97,5.34,5.75-4.66,10.43-9.6,12.45-16.52l2.65-9.09c-5.52,2.81-9.26,6.49-15.71,3.06,7.69-4.62,11.28-11.61,12.04-20.01.88-9.83,6.05-18.25,14.81-22.63,5.93-2.97,10.05-8.11,12.13-14.57,7.69-23.89,7.29-43.54,15.2-67.79,6.52-19.99,25.23-26.25,44.29-24.52l34.35,3.12c38.1,3.46,76.01,2.04,112.88-8.24,5.23-5.37,10.81-9.49,17.16-12.8-12.87-2.45-25.66-3.65-35.68-11.71-8.41-6.76-31.92-34.37-28.01-45.72,6.66,11.87,22.9,28.05,33.91,33.57,20.6,10.32,46.15,9.18,68.24,7.71,14.51-9.73,27.76-6.74,41.2,1.97,21.15-4.74,42.55-8.22,59.11-22.15,8.71-7.33,20.01-24.05,22.82-34.92,3.24,10.4-7.49,34.01-13.55,42.26-11.96,16.29-40.35,22.55-58.67,30.24,6.45,15.3-2.55,17.17,6.16,35.03-2.13.69-4.9-.11-6.14-1.99-7.97-12-1.06-21.63-10.79-34.87l2.55-1.06c.39-.16-.53-2.21-.95-2.44l-10.36-5.68,5.18-1.82c-6.99-4.88-15.52-5.88-23.27-3.23l7.69,4.06-7.94,5.36c13.8,1.11,23.79,10.42,27.08,23.78l4.32,17.55-8.33,6.13c1.24,3.51,3.37,6.95,5.53,9.54,2.23-3.16,3.57-7.62,6.66-8.82,3.71-1.45,8.92-1.1,13.18-.8,2.44,4.11,2.57,11.76-1.94,14.97-8.19,5.83-13.19,4.44-22,5.03-9.77,15.36-19.55,7.05-23.57,15.39-16.02,33.21-4.36,48.53-27.62,74.56-8.38-16.64-5.89-40.57-23.74-47.3.36,3.15.33,6.09.01,9.36,4.62,1.82,7.58,8.6,4.69,12.53-1.94,2.64-6.99.1-7.17.84l-.72,3c-.56,2.34,3.81-4.46,9.01,5.09l4.5-6.48,4.37,13.07c1.7,5.08,3.82,10.42,7.39,14.32,15.69,17.17,2.87,28.05,16.75,45.43l18.7,23.41c3.04,3.81,8.74.25,9.43,4.97.27,1.82-1.34,4.35-3.57,4.35l-122.67.12-169.17-.06ZM279.56,131.24c-4.04-15.26-7.63-29.47-8.28-45.28-3.76,15.32-1.05,32.16,8.28,45.28ZM290.46,121.06l-5.5-31.07-.39,12.15c-.21,6.56,2.51,12.97,5.89,18.92ZM124.07,126.83l5.17-7.99c2.16-3.33,4.36-6.15,7.42-8.59-5.71-1.65-8.72,3.07-12,7.53-3.63-3-2.74-9.14,1.21-11.66,3.41-2.17,6.8-3.67,10.75-5.74-7.29-2.2-14.28-2.84-21.39-3.18,4.7,13.94-11.87,8.37-12.22,28.96,2.06-5.34,5.36-10.04,10.92-11.9l.05,6.14,6.41-2.4,3.67,8.84ZM197.33,124.37c5.17-1.75,11.49,2.35,16.28,2.8,1.24-2.19,3.07-4.35,5.4-5.69l9.02-5.21,2.43,1.7c2.02-5.75,2.81-11.54,1.91-16.9-1.55,3.76-3.13,6.55-5.64,8.94l-2.87-3.01c-.38,3.73-3.9,8.76-7.46,6.18-3.96-2.86-1.68-8.75-.79-13.55l-4.47,2.44-1.41-4.2-46.83,3.96c10.24,8.26-10.13,12.02-6.87,24.49l5.34-8.65c2.3-.96,6.49-2.23,7.8-3.84l3.07-3.8c.55-.68,2.84,1.46,3.7,1.33,4.15-.61,6.82-5.96,10.68-3.47,1.3.84,1.42,4.3.71,5.63l-5.04,9.38,6.65-.33-3.03,5.67,11.43-3.86ZM125.58,267.49c-6.08-8.18-12.18-15.42-18.55-22.76-5.35-6.16-5.82-13.83-1.33-20.59,2.9-4.36-.07-10.51.15-15.16,2.62-6.9,11.02-11.69,17.57-14.21,10.1-3.9,17.39,1.08,22.41,1.89.32.05.62-1.58.36-1.77l-12.31-8.67c-5.72-4.03-7.39-9.33-7.57-16.39-1.25,6.87-6.37,12.65-13.44,11.4-1.03-.18-2.75-1.71-2.42-2.45l1.16-2.59-11.79,3.55c-1.01.3-3.65-.48-3.87-1.37l-.9-3.68-8.89,14.79c-3.52-3.95-3.33-10.22-3.17-14.86l-4.9,1.41-1.46-7.62c-4.23,3.32-5.68,8.74-5.1,13.46l6.17.38c3.76.23-1.49,12.14.13,15.75,1.28-2.02,2.88-4.76,4.37-4.97,1.3-.18,3.71.99,4.99,1.63,1.71-4.7,4.33-10.95,10.13-11.24,5.44-.27,10.11-.13,16.02.12l-8.23,9.28c1.91-.81,4.86-.73,7.97.44-19.72,16.08-18.08,32.73-34.62,49.53-14.3,14.52-21.09,37.82-10.01,55.57l74.41-.15-4.65-3.94c-.81-.69.24-3.43.22-4.57-12.72-1.24-3.19-9.2-12.84-22.19ZM220.47,298.1h74.62c1.11,0,1.58-2.94.89-3.09l-3.24-.71c-3.38-.74-5.25-2.6-5.14-6.17.67-21.41-14.82-27.73-19.54-36.36l-9.95-18.19c-7.2-13.17-16.15-11.97-20.4-26.62l-5.77-19.86-7.05,11.21-10.78-7.23-.94,3.76-9.49,2.7c12.38,3.47,24.25,4.94,31.87,16.72,8.9,13.77,15.87,13.75,20.19,24.82,3.2,8.19-.83,15.97-7.59,20.54-5.87,3.97-9.54,9.99-12.4,16.44-6.91,15.55-8.65,7.88-15.27,22.05ZM227.18,260.31c4.23-6.17,4.74-11.41,4.32-18.37l-1.19-19.5c-15.14-7.33-33.68-12.56-49.56-6.44-5.32,2.05-7.87,6.07-7.68,12.7-2.63.43-7,.46-9.23-.29-2.5-9.6-13.36-17.5-21.87-21.02-3.56,32.08-18.9,28.46,4.46,61.98,6.53,9.38,11.99,18.2,17.77,28.77l40.47.17.11-16.01,7.55-3.49c-1.18-12.24,4.17-2.92,14.87-18.5Z'/%3E%3C/svg%3E");
    background: var(--cc-bg);
}

/* ============================================================
   1. Hero
   ============================================================ */

.cc-hero {
    background: var(--cc-blue);
    padding: 60px 20px;
    text-align: center;
}

.cc-hero__inner {
    max-width: 700px;
    margin: 0 auto;
}

.cc-hero__title {
    font-family: var(--tx-font-heading);
    font-size: 5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin: 0;
}

.cc-hero__title span {
    color: #ffffff;
}

.cc-hero__subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-family: var(--tx-font-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.cc-hero .cc-nav-link {
    margin-top: 1.25rem;
}

/* Meta bar + CTA when inside the hero */
.cc-hero__meta {
    margin-top: 0.5rem;
    justify-content: center;
}

.cc-hero .meta-stat .num {
    color: #ffffff;
}

.cc-hero .meta-stat .label {
    color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   2. Meta bar
   ============================================================ */

.meta-bar {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.meta-stat {
    text-align: center;
}

.meta-stat .num {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--tx-font-heading);
    color: var(--cc-blue);
    line-height: 1;
}

.meta-stat .label {
    font-size: 0.688rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cc-text-dim);
    font-family: var(--tx-font-meta);
    font-weight: 700;
    background: none;
    padding: 0;
}

/* CTA links */
.cc-nav-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.813rem;
    font-family: var(--tx-font-heading);
    letter-spacing: 0.02em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cc-nav-link:hover {
    background: #ffffff;
    color: var(--cc-blue);
    border-color: #ffffff;
}

.cc-nav-link--solid {
    background: var(--cc-red);
    color: #ffffff;
    border-color: var(--cc-red);
}

.cc-nav-link--solid:hover {
    background: var(--cc-red-dark);
    border-color: var(--cc-red-dark);
    color: #ffffff;
}

/* ============================================================
   3. Sticky filter bar
   ============================================================ */

.cc-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 2rem;
    flex-wrap: wrap;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid var(--cc-hairline);
}

.cc-filter-group {
    display: flex;
    gap: 0;
    align-items: center;
}

.cc-filter-label {
    font-size: 0.688rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cc-text-dim);
    opacity: 0.6;
    margin-right: 0.5rem;
    font-weight: 600;
    font-family: var(--tx-font-meta);
}

.cc-filter-divider {
    width: 1px;
    height: 20px;
    background: var(--cc-text-dim);
    opacity: 0.15;
    margin: 0 1.25rem;
}

/* Filter count badge — secondary number shown after the button label */
.cc-filter-count {
    font-size: 0.688rem;
    font-weight: 500;
    opacity: 0.55;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.25rem;
    font-family: var(--tx-font-meta);
}

.cattle-call-page .filter-btn {
    padding: 0.5rem 0.875rem;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cc-text-dim);
    cursor: pointer;
    font-size: 0.813rem;
    font-weight: 600;
    font-family: var(--tx-font-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s, border-color 0.15s;
}

.cattle-call-page .filter-btn:hover {
    color: var(--cc-text);
}

.cattle-call-page .filter-btn.active {
    background: transparent;
    color: var(--cc-red);
    border-bottom: 2px solid var(--cc-red);
}

.cattle-call-page .filter-btn.party-dem.active {
    color: var(--cc-blue);
    border-bottom-color: var(--cc-blue);
    background: transparent;
}

.cattle-call-page .filter-btn.party-rep.active {
    color: var(--cc-red);
    border-bottom-color: var(--cc-red);
    background: transparent;
}

.cattle-call-page .filter-btn.party-neu.active {
    color: var(--cc-neutral);
    border-bottom-color: var(--cc-neutral);
    background: transparent;
}

.cattle-call-page .filter-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   4. Dashboard grid
   ============================================================ */

.cc-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
    display: block;
}

/* ============================================================
   5. Race cards
   ============================================================ */

.cattle-call-page .race-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    margin-bottom: 0;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--cc-hairline);
}

.cattle-call-page .race-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cattle-call-page .race-card.full-width {
    grid-column: 1 / -1;
}

/* Featured race cards (Senate) — front-page treatment */
.cattle-call-page .race-card.race-card--featured {
    background: rgba(250, 248, 245, 0.7);
    border-left: 3px solid var(--cc-red);
    padding: 2rem 2rem 3rem;
    border-bottom: 1px solid var(--cc-hairline);
}

.cattle-call-page .card-header {
    padding: 0 0 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: none;
}

.cattle-call-page .card-header h2 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cc-text-dim);
    font-family: var(--tx-font-body);
    margin: 0;
}

.cattle-call-page .card-header .cc-party-badge,
.cattle-call-page .card-header .party-badge {
    margin-left: 0.75rem;
}

/* Party badges */
.cc-party-badge,
.cattle-call-page .party-badge {
    font-size: 0.813rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    flex-shrink: 0;
    font-family: var(--tx-font-meta);
    border-radius: 0;
    background: none;
}

.cc-party-badge.cc-gop,
.cattle-call-page .party-badge.gop {
    background: none;
    color: var(--cc-red);
    border: 1px solid rgba(152, 8, 12, 0.25);
}

.cc-party-badge.cc-dem,
.cattle-call-page .party-badge.dem {
    background: none;
    color: var(--cc-blue);
    border: 1px solid rgba(67, 111, 136, 0.25);
}

/* Response count badge */
.cattle-call-page .response-count-badge {
    font-size: 0.875rem;
    color: var(--cc-text);
    margin-top: 0.25rem;
    font-family: var(--tx-font-meta);
    font-weight: 600;
}

/* ============================================================
   6. Chart area
   ============================================================ */

.cattle-call-page .chart-area {
    padding: 1.25rem 0;
    position: relative;
}

.cattle-call-page .chart-area canvas {
    max-height: 140px;
}

/* ============================================================
   7. Insight blurb
   ============================================================ */

.cattle-call-page .insight-blurb {
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px solid var(--cc-border);
    font-size: 0.938rem;
    color: var(--cc-blue);
    font-style: italic;
    line-height: 1.6;
    font-family: var(--tx-font-secondary);
}

/* ============================================================
   8. Runoff bars
   ============================================================ */

.cattle-call-page .runoff-section {
    padding: 1.5rem 0;
    border-top: 1px solid var(--cc-hairline);
}

.cattle-call-page .runoff-section h3 {
    font-size: 0.813rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cc-text-dim);
    margin-bottom: 1rem;
    font-family: var(--tx-font-meta);
    font-weight: 600;
}

.cattle-call-page .runoff-bar {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.938rem;
}

.cattle-call-page .runoff-name {
    width: 160px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 0.875rem;
    color: var(--cc-text);
    font-size: 0.938rem;
    font-weight: 600;
    font-family: var(--tx-font-meta);
}

.cattle-call-page .runoff-track {
    flex: 1;
    height: 20px;
    background: rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    border-radius: 2px;
}

.cattle-call-page .runoff-fill {
    height: 100%;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    font-family: var(--tx-font-meta);
}

.cattle-call-page .runoff-fill.gop {
    background: var(--cc-red);
}

.cattle-call-page .runoff-fill.dem {
    background: var(--cc-blue);
}

.cattle-call-page .no-runoff-pct {
    margin-left: 0.625rem;
    color: var(--cc-red);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    font-family: var(--tx-font-meta);
}

/* ============================================================
   9. Commentary
   ============================================================ */

.cattle-call-page .commentary-section {
    padding: 1.5rem 0;
    border-top: 1px solid var(--cc-hairline);
}

.cattle-call-page .commentary-toggle {
    font-size: 0.875rem;
    color: var(--cc-red);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    font-weight: 700;
    font-family: var(--tx-font-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0;
}

.cattle-call-page .commentary-toggle:hover {
    text-decoration: underline;
}

.cattle-call-page .commentary-list {
    margin-top: 0.75rem;
    display: none;
}

.cattle-call-page .commentary-list.open {
    display: block;
}

.cattle-call-page .commentary-item {
    padding: 1rem 0 1rem 1.25rem;
    border-left: 2px solid var(--cc-hairline);
    margin-bottom: 0.625rem;
    font-size: 1rem;
    line-height: 1.65;
    color: #444;
    font-family: var(--tx-font-secondary);
}

.cattle-call-page .commentary-item:last-child {
    margin-bottom: 0;
}

/* Commentary tags — muted byline metadata */
.cattle-call-page .commentary-item .tag {
    display: inline-block;
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    margin-right: 0.375rem;
    vertical-align: middle;
    font-family: var(--tx-font-meta);
    background: none;
    border: none;
    color: var(--cc-text-dim);
    opacity: 0.65;
}

.cattle-call-page .tag.dem {
    background: var(--cc-blue);
    color: #ffffff;
    opacity: 1;
    border-radius: 2px;
}

.cattle-call-page .tag.rep {
    background: var(--cc-red);
    color: #ffffff;
    opacity: 1;
    border-radius: 2px;
}

.cattle-call-page .tag.neu {
    background: var(--cc-neutral);
    color: #ffffff;
    opacity: 1;
    border-radius: 2px;
}

/* ============================================================
   10. Empty state
   ============================================================ */

.cattle-call-page .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--cc-text-dim);
}

.cattle-call-page .empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--cc-text);
    font-family: var(--tx-font-heading);
}

/* ============================================================
   11. Progress bar (form page)
   ============================================================ */

#progressBar.cc-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--cc-red);
    transition: width 0.3s ease;
    z-index: 9;
}

/* ============================================================
   12. Form container (form page)
   ============================================================ */

.cc-form-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}

.cc-section {
    background: #ffffff;
    border: 1px solid var(--cc-border);
    margin-bottom: 2rem;
    overflow: hidden;
}

.cc-section-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cc-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cc-section-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cc-text);
    font-family: var(--tx-font-heading);
    margin: 0;
}

.cc-section-body {
    padding: 1.25rem 1.5rem;
}

.cc-field {
    margin-bottom: 1.25rem;
}

.cc-field:last-child {
    margin-bottom: 0;
}

.cc-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--cc-text);
    font-family: var(--tx-font-meta);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cc-required {
    color: var(--cc-red);
    margin-left: 0.15rem;
}

.cc-field select,
.cc-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
    font-size: 0.9rem;
    font-family: var(--tx-font-body);
    transition: border-color 0.2s;
    border-radius: 0;
}

.cc-field select:focus,
.cc-field textarea:focus {
    outline: none;
    border-color: var(--cc-blue);
}

.cc-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-color: var(--cc-bg);
    padding-right: 2.5rem;
    cursor: pointer;
}

.cc-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Submit area */
.cc-submit-area {
    text-align: center;
    padding: 1rem 0 2rem;
}

.cc-submit-btn {
    padding: 0.75rem 3rem;
    background: var(--cc-red);
    color: #ffffff;
    border: none;
    border-radius: 0;
    font-size: 0.813rem;
    font-weight: 700;
    font-family: var(--tx-font-heading);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s;
}

.cc-submit-btn:hover {
    background: var(--cc-red-dark);
}

.cc-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toast notification */
.cc-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 1rem 1.5rem;
    background: #45B545;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    font-family: var(--tx-font-meta);
    z-index: 9000;
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.cc-toast.show {
    transform: translateX(0);
}

/* ============================================================
   13. BULLS VISUALIZATION — Tab Navigation
   ============================================================ */

.cc-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    flex-wrap: wrap;
    background: var(--cc-bg);
    border-bottom: 1px solid var(--cc-hairline);
    z-index: 99;
}

/* Opt-in sticky tabs — enabled via ACF toggle on campaign */
.cc-tabs--sticky {
    position: sticky;
    top: var(--site-header-height, 156px);
}

.cc-tabs__btn {
    font-family: var(--tx-font-meta);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.25rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cc-text-dim);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-transform: uppercase;
}

.cc-tabs__btn:hover {
    color: var(--cc-text);
}

.cc-tabs__btn--active {
    background: transparent;
    color: var(--cc-red);
    border-bottom: 2px solid var(--cc-red);
}

/* ============================================================
   14. BULLS — Results Group (Section)
   ============================================================ */

.cc-results-group {
    margin-bottom: 3rem;
}

.cc-results-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1.5rem;
}

.cc-results-group__title {
    font-family: var(--tx-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-text);
    border-bottom: none;
    border-left: 4px solid #c8102e;
    padding-left: 10px;
    padding-bottom: 0;
    margin: 0;
}

/* ============================================================
   15. BULLS — Contest Card
   ============================================================ */

.cc-contest {
    background: #fff;
    border: none;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.cc-contest:last-child {
    margin-bottom: 0;
}

/* Party accent — subtle left border */
.cc-contest[data-party="republican"] {
    border-left: 4px solid var(--cc-red);
}
.cc-contest[data-party="democrat"] {
    border-left: 4px solid var(--cc-blue);
}

.cc-contest__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cc-border);
    background: none;
}

.cc-contest__question {
    font-family: var(--tx-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cc-text);
    max-width: 700px;
    line-height: 1.7;
    margin: 1rem 0;
}

.cc-contest__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cc-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 1rem;
    font-family: var(--tx-font-meta);
}

/* 2-Column Body: Left (analysis + bulls) | Right (quotes) */
.cc-contest__body {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0;
    padding: 0;
}

.cc-contest__left {
    padding: 1.5rem;
}

.cc-contest__right {
    border-left: none;
    padding: 1.5rem;
}

/* ============================================================
   16. BULLS — AI Analysis (top of left half)
   ============================================================ */

.cc-contest__analysis {
    font-family: var(--tx-font-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
    border-bottom: none;
}

.cc-contest__analysis p {
    margin: 0 0 0.75rem;
}

.cc-contest__analysis p:last-child {
    margin-bottom: 0;
}

.cc-contest__analysis-icon {
    color: var(--cc-red);
    margin-bottom: 0.75rem;
}

.cc-contest__analysis-pending {
    font-style: italic;
    color: var(--cc-text-dim);
    font-size: 0.85rem;
}

/* ============================================================
   17. BULLS — Bulls Comparison Chart (bottom of left half)
   ============================================================ */

.cc-bulls__chart {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.cc-bulls__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0 1rem;
    border-right: 1px solid var(--cc-border);
}

.cc-bulls__column:last-child {
    border-right: none;
}

.cc-bulls__name {
    font-family: var(--tx-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    text-align: center;
    color: var(--cc-text);
    line-height: 1.3;
}

/* Grid layout: fills column width, auto columns */
.cc-bulls__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    width: 100%;
}

.cc-bulls__count {
    font-family: var(--tx-font-meta);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--cc-text-dim);
    margin-top: 0.15rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Individual Bull (cow skull shape) */
.cc-bull {
    display: block;
    width: 44px;
    height: 31px;
    -webkit-mask-image: var(--cc-skull);
    mask-image: var(--cc-skull);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.15s;
    cursor: default;
}

.cc-bull:hover {
    transform: scale(1.35);
    z-index: 1;
    position: relative;
}

.cc-bull--republican { background-color: #A22F23; }
.cc-bull--democrat   { background-color: var(--cc-blue); }
.cc-bull--neutral    { background-color: #D4A843; }

/* Bull entrance animation — JS adds .cc-bulls--has-js then triggers per-grid */
.cc-bulls--has-js .cc-bull {
    opacity: 0;
    transform: scale(0);
}

.cc-bulls--has-js .cc-bulls__grid--animate .cc-bull {
    animation: ccBullIn 0.3s ease forwards;
}

@keyframes ccBullIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Floating tooltip */
.cc-bull-tip {
    position: absolute;
    display: none;
    background: var(--cc-card-bg, #1a1a1a);
    color: #fff;
    font-family: var(--tx-font-meta);
    font-size: 0.688rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Legend */
.cc-bulls__legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    font-size: 0.7rem;
    font-family: var(--tx-font-meta);
    color: var(--cc-text-dim);
}

.cc-bulls__legend .cc-bull {
    display: inline-block;
    width: 22px;
    height: 16px;
    vertical-align: middle;
    margin-right: 3px;
    opacity: 1;
    transform: none;
    animation: none;
}

/* ============================================================
   18. BULLS — Quotes (right half)
   ============================================================ */

.cc-quotes {
    padding: 0;
}

.cc-quotes__title {
    font-family: var(--tx-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-text-dim);
    margin: 0 0 1rem;
}

.cc-quotes__empty {
    font-size: 0.85rem;
    color: var(--cc-text-dim);
    font-style: italic;
}

.cc-quote {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.cc-quote__text {
    font-family: var(--tx-font-secondary);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #444;
    margin: 0 0 0.35rem;
}

.cc-quote__cite {
    font-style: normal;
    font-size: 0.7rem;
    color: var(--cc-text-dim);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--tx-font-meta);
}

/* ============================================================
   19. BULLS — Badges
   ============================================================ */

.cc-badge {
    display: inline-block;
    font-family: var(--tx-font-meta);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 0;
    color: #fff;
}

.cc-badge--republican { background: #A22F23; }
.cc-badge--democrat   { background: var(--cc-blue); }
.cc-badge--neutral    { background: #D4A843; color: #333; }

/* ============================================================
   20. BULLS — Runoff Bar
   ============================================================ */

.cc-runoff {
    font-family: var(--tx-font-meta);
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    background: none;
    border-top: 1px solid var(--cc-border);
    color: #000;
    line-height: 1.6;
}

.cc-runoff strong {
    letter-spacing: 0.04em;
    color: #000;
}

/* ============================================================
   21. BULLS — Hero Meta Line
   ============================================================ */

.cc-hero__meta {
    font-family: var(--tx-font-meta);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
    line-height: 1.7;
}

/* ============================================================
   22. Responsive
   ============================================================ */

@media (max-width: 640px) {

    .cattle-call-page {
        overflow-x: hidden;
    }

    .cc-hero {
        padding: 32px 16px;
    }

    .cc-hero__title {
        font-size: 2.75rem;
    }

    .cc-hero__subtitle {
        font-size: 0.813rem;
    }

    /* Form page */
    .cc-form-container {
        padding: 0.75rem;
    }

    .cc-section-header,
    .cc-section-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .cc-field label {
        font-size: 0.813rem;
    }

    .cc-field select,
    .cc-field textarea {
        font-size: 0.875rem;
        padding: 0.625rem 0.75rem;
    }

    .cc-submit-btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }

    /* Dashboard container */
    .cc-dashboard {
        padding: 1.5rem 0.75rem;
    }
}

/* ---- Bulls-specific responsive ---- */

/* Mobile: Everything stacks — analysis, then bulls, then quotes */
@media (max-width: 768px) {
    .cc-results-group__header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cc-bulls__legend {
        width: 100%;
    }

    .cc-contest__body {
        grid-template-columns: 1fr;
    }

    .cc-contest__left {
        padding: 1rem;
    }

    .cc-contest__right {
        border-left: none;
        border-top: none;
        padding: 1rem;
    }

    .cc-contest__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .cc-contest__count {
        margin-left: 0;
    }

    /* Bulls grid: smaller on mobile */
    .cc-bulls__grid {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
        gap: 4px;
    }

    .cc-bull {
        width: 28px;
        height: 20px;
    }

    .cc-bulls__legend .cc-bull {
        width: 18px;
        height: 13px;
    }

    /* Runoff */
    .cc-runoff {
        padding: 0.625rem 1rem;
        font-size: 0.688rem;
    }

    /* Tabs */
    .cc-tabs {
        gap: 0.15rem;
        padding: 0.75rem 0.5rem;
    }

    .cc-tabs__btn {
        font-size: 0.625rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Reduced motion: skip bull animation */
@media (prefers-reduced-motion: reduce) {
    .cc-bulls--has-js .cc-bull {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}