/* Final compare-page CSS corrections.
   These rules replace legacy declarations that browsers ignored because of
   malformed values or misspelled selectors. Loaded after compare/map styles. */

body[data-page="compare"] .service-subhero {
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 30, 53, 0.075), transparent 32%),
    linear-gradient(180deg, rgba(16, 19, 27, 0.94), rgba(8, 10, 15, 0.92)) !important;
}

body[data-page="compare"] .subhero-copy h2 {
  font-size: clamp(30px, 3.2vw, 44px) !important;
}

body[data-page="compare"] .subhero-copy > div:first-child > p:not(.section-label) {
  color: rgba(210, 216, 230, 0.72) !important;
}

body[data-page="compare"] .benchmark-line {
  padding: 12px 13px !important;
}

body[data-page="compare"] .benchmark-line strong {
  color: rgba(245, 247, 252, 0.92) !important;
}

body[data-page="compare"] .risk-signal-board {
  display: grid;
  gap: 9px;
}

body[data-page="compare"] .risk-signal-card p {
  margin-top: 8px !important;
  color: rgba(190, 196, 210, 0.66) !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
}

body[data-page="compare"] .compare-memo-card {
  position: relative;
  overflow: hidden;
}

body[data-page="compare"] .compare-memo-card::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 26px;
  width: 52px;
  height: 52px;
  border-top: 1px solid rgba(255, 54, 80, 0.42);
  border-right: 1px solid rgba(255, 54, 80, 0.42);
  opacity: 0.8;
  pointer-events: none;
}

body[data-page="compare"] .decision-memo-row.is-primary {
  border-color: rgba(255, 54, 80, 0.28) !important;
}

body[data-page="compare"] .decision-memo-row strong {
  color: #fff !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

@media (max-width: 820px) {
  body[data-page="compare"] .service-status-card {
    width: 100%;
  }
}

/* Refined Redveil accents.
   Preserve the cool crimson identity while reducing luminous area and glow.
   Large scores use neutral ink; crimson remains a restrained structural cue. */

body[data-page="compare"] {
  --compare-crimson: #c43f52;
  --compare-crimson-bright: #d45a6b;
  --compare-crimson-deep: #842334;
  --compare-crimson-border: rgba(196, 63, 82, 0.2);
  --compare-crimson-border-strong: rgba(196, 63, 82, 0.3);
  --compare-crimson-surface: rgba(196, 63, 82, 0.055);
  --compare-crimson-surface-soft: rgba(196, 63, 82, 0.025);
  --compare-crimson-glow: rgba(196, 63, 82, 0.08);
  --compare-score-ink: rgba(244, 246, 250, 0.95);
}

/* Large values are readable without becoming luminous red blocks. */
body[data-page="compare"] .metric-scoreline span,
body[data-page="compare"] .risk-signal-card.tone-high strong {
  color: var(--compare-score-ink) !important;
  text-shadow: none !important;
}

/* Keep crimson on smaller metadata and alert labels only. */
body[data-page="compare"] .risk-signal-card.tone-high span,
body[data-page="compare"] .decision-memo-row.is-primary span,
body[data-page="compare"] .compare-card .rank-pill {
  color: var(--compare-crimson-bright) !important;
  text-shadow: none !important;
}

body[data-page="compare"] .compare-card .rank-pill,
body[data-page="compare"] .tone-pill.tone-high,
body[data-page="compare"] .interpretation-badge.is-caution {
  border-color: var(--compare-crimson-border) !important;
  background: var(--compare-crimson-surface) !important;
  box-shadow: none !important;
}

body[data-page="compare"] .risk-signal-card.tone-high,
body[data-page="compare"] .decision-cue,
body[data-page="compare"] .decision-memo-row.is-primary {
  border-color: var(--compare-crimson-border) !important;
  background:
    radial-gradient(circle at 92% 10%, var(--compare-crimson-surface), transparent 40%),
    linear-gradient(180deg, var(--compare-crimson-surface-soft), rgba(255, 255, 255, 0.018)) !important;
  box-shadow: none !important;
}

/* Comparison bars stay red, but use a deeper low-luminance crimson. */
body[data-page="compare"] .progress-track span,
body[data-page="compare"] .metric-mini-row .progress-track span,
body[data-page="compare"] .progress-fill,
body[data-page="compare"] .metric-mini-row .progress-fill {
  background: linear-gradient(90deg, #9f2d40, var(--compare-crimson)) !important;
  box-shadow: none !important;
}

body[data-page="compare"] .compare-card::before,
body[data-page="compare"] .decision-cue::before,
body[data-page="compare"] .decision-memo-row.is-primary::after {
  background: var(--compare-crimson) !important;
  box-shadow: 0 0 8px var(--compare-crimson-glow) !important;
}

body[data-page="compare"] .compare-memo-card::after {
  border-color: var(--compare-crimson-border-strong) !important;
  opacity: 0.5;
}

body[data-page="compare"] .button-primary,
body[data-page="compare"] #compare-run {
  border-color: var(--compare-crimson-border-strong) !important;
  background: linear-gradient(135deg, #ad3045, var(--compare-crimson-deep)) !important;
  box-shadow:
    0 12px 26px rgba(132, 35, 52, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body[data-page="compare"] .candidate-district-map:not(.is-amber):not(.is-cool) {
  --map-accent: var(--compare-crimson);
  background:
    radial-gradient(circle at 66% 38%, rgba(196, 63, 82, 0.04), transparent 36%),
    linear-gradient(180deg, rgba(13, 16, 23, 0.96), rgba(8, 10, 15, 0.98)) !important;
}

body[data-page="compare"] .service-status-card {
  border-color: var(--compare-crimson-border) !important;
  background:
    linear-gradient(180deg, rgba(196, 63, 82, 0.045), rgba(255, 255, 255, 0.026)) !important;
}