/* Shared by progress and the session-completion view. */
#response.response-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--clarity-surface-light);
  border-radius: 12px;
  background: var(--clarity-surface-white);
  color: var(--clarity-brand-navy);
  text-align: center;
}
.response-comparison .response-card,
.response-comparison .response-progress {
  padding: 24px 16px;
  border: 1px solid var(--clarity-surface-light);
  border-radius: 12px;
  background: var(--clarity-surface-white);
}
.response-comparison h2 {
  margin: 0 0 20px;
  color: var(--clarity-text-primary);
  font-size: 13px;
  font-weight: var(--e-global-typography-secondary-font-weight);
  line-height: 1.4;
  text-transform: uppercase;
}
.response-comparison .overlay-box {
  position: relative;
  width: min(100%, 160px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--clarity-surface-light);
  border-radius: 50%;
}
.response-comparison .overlay-wrap { inset: 0; }
/* Profile loading sets inline pixel sizes for legacy pages. Fit both layers here. */
.response-comparison .overlay-box img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.response-comparison .response-value {
  margin: 18px 0 0;
  font-size: clamp(26px, 4vw, 32px);
  font-weight: var(--e-global-typography-secondary-font-weight);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.response-comparison .response-progress {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: var(--e-global-typography-primary-font-weight);
  line-height: 1.3;
}
.response-comparison .response-progress span { font: inherit; }
@media (min-width: 768px) {
  #response.response-comparison { padding: 16px; gap: 12px; }
  .response-comparison .response-card { padding: 12px 16px; }
  .response-comparison h2 { font-size: 12px; margin-bottom: 8px; }
  /* Leave room for labels, values and the progress row within about 33vh. */
  .response-comparison .overlay-box { width: min(100%, clamp(64px, calc(33vh - 172px), 160px)); }
  .response-comparison .response-value { margin-top: 8px; font-size: 24px; }
}
@media (max-width: 600px) {
  #response.response-comparison { padding: 12px; gap: 12px; }
  .response-comparison .response-card { padding: 18px 8px; }
  .response-comparison h2 { font-size: 11px; margin-bottom: 14px; }
  .response-comparison .overlay-box { max-width: 112px; }
}