/* Audit-page composition, scoped to the performance summary. */
.performance-page { color: var(--color-neutral); }
.performance-page p { margin-block: 12px 20px; }
.performance-page h1 { margin: 0 0 16px; font: 600 32px/1.25 var(--font-heading); }
.performance-page h3 { margin: 0 0 8px; color: var(--color-dark-blue); font: 600 22px/1.3 var(--font-heading); }
.performance-page .section-title { font-size: 32px; }
.performance-page .performance-section { padding-block: 32px; }
.performance-page .performance-reading { max-width: 890px; }
.performance-page .performance-hero { text-align: center; padding-block: 32px; }
.performance-page .performance-dark { background: var(--color-dark-blue); color: var(--color-white); }
.performance-page .performance-pale { background: var(--color-pale-blue); }
.performance-page .performance-intro { max-width: 850px; margin: 16px auto 24px; text-align: center; }
.performance-page .performance-scores { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.performance-page .performance-score { padding: 24px 12px; text-align: center; }
.performance-page .performance-score h3 { font: 600 18px/1.4 var(--font-body); }
.performance-page .performance-score h3 span { display: block; font-weight: 400; }
.performance-page .performance-score p { margin: 12px 0 0; }
.performance-page .performance-score strong { color: var(--color-dark-blue); font: 700 40px/1.2 var(--font-heading); }
.performance-page .content-card:not(.performance-score) { padding: 24px; }
.performance-page .performance-note { margin-block: 24px; padding: 16px 24px; border-left: 4px solid var(--color-primary); border-radius: 8px; background: var(--color-white); color: var(--color-dark-blue); }
.performance-page .performance-note > :first-child { margin-top: 0; }
.performance-page .performance-note > :last-child { margin-bottom: 0; }
.performance-page dt { color: var(--color-dark-blue); font-weight: 700; margin-top: 20px; }
.performance-page dd { margin: 4px 0 16px; }
.performance-page .button { min-height: 44px; }
.performance-page .performance-actions { margin-top: 24px; }
.performance-page .performance-evidence-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 24px; }
.performance-page figure { min-width: 0; margin: 0; }
.performance-page figure .responsive-image { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }
.performance-page figcaption { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.performance-page .performance-vitals-illustration { margin-block: 24px; }
.performance-page section[aria-labelledby="performance-evidence"] h3 { margin-top: 28px; }
.performance-page section[aria-labelledby="performance-evidence"] .performance-note h3 { margin-top: 0; }
@media (max-width: 1023px) {
  .performance-page .performance-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .performance-page .performance-evidence-images { grid-template-columns: minmax(0, 1fr); }
  .performance-page .performance-scores { grid-template-columns: minmax(0, 1fr); }
  .performance-page .performance-note { padding: 16px; }
}