/* Quality uses the existing AVDS summary, metric, chart and provenance surfaces. */
body[data-avds-page="quality"] {
  --surface-canvas: #f7f3ec;
  --surface-base: #fffdf9;
  --surface-muted: #f5f0e8;
  --avds-surface-tint: #faf6ef;
  background: var(--surface-canvas);
}

body[data-avds-page="quality"] .seo-main {
  background: var(--surface-canvas);
}

body[data-avds-page="quality"] .quality-visual-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-avds-page="quality"] .quality-corpus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-avds-page="quality"] .quality-summary-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 12px;
  padding: 16px;
}

body[data-avds-page="quality"] .quality-summary-heading {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-avds-page="quality"] .quality-summary-card {
  display: flex;
  min-height: 106px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 14px;
}

/* Three real metrics: one full-width count, then the two searchable totals. */
body[data-avds-page="quality"] .quality-summary-card:first-of-type {
  grid-column: 1 / -1;
  min-height: 88px;
}

body[data-avds-page="quality"] .quality-summary-label {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

body[data-avds-page="quality"] .quality-summary-value {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.18;
}

body[data-avds-page="quality"] .quality-summary-card small {
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.35;
}

body[data-avds-page="quality"] .solution-decision li::before {
  content: counter(decision);
}

body[data-avds-page="quality"] .avds-bar-chart__fill {
  display: block;
}

/* Corpus names are source labels; keep the full label visible at narrow widths. */
body[data-avds-page="quality"] .avds-bar-chart__label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

html[data-theme="dark"] body[data-avds-page="quality"] {
  --surface-canvas: #181a1f;
  --surface-base: #22252b;
  --surface-muted: #1c1f24;
  --surface-hover: #2c3037;
  --surface-elevated: #252930;
  --avds-surface-tint: #292d34;
  --avds-rail: #d8ba70;
  --color-text-primary: #f3f3f4;
  --color-text-secondary: #c9cbd0;
  --color-text-muted: #a9adb6;
  --color-border-default: #41454e;
  --color-border-subtle: #333740;
  --color-accent-secondary: #95a5ba;
  background: var(--surface-canvas);
}

.quality-summary-strip[hidden],
.quality-visual-section[hidden],
.product-section[data-quality-live-surface][hidden] {
  display: none !important;
}

body[data-avds-page="quality"] [data-quality-corpus][hidden] {
  display: none !important;
}

@media (max-width: 560px) {
  body[data-avds-page="quality"] .quality-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-avds-page="quality"] .quality-summary-card {
    min-height: 98px;
    padding: 12px;
  }
}

@media (max-width: 760px) {
  body[data-avds-page="quality"] .quality-corpus-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}