/* audits — Site Audits (M6) console styles. Console chrome comes from
 * styles.css / styles/platform.css; this file only adds the audit-specific
 * pieces: score pills with bands, the rating buttons, section blocks. */

.audits-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 0 0 14px; }
.audits-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted, #6b6b70); }
.audits-filters select, .audits-filters input { min-width: 160px; }

.row-link { cursor: pointer; }
.row-link:hover td { background: color-mix(in srgb, var(--color-text, #1d1f20) 5%, transparent); }

.score-pill { font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }
.score-pill[data-band="green"] { background: color-mix(in srgb, #2e7d32 10%, transparent); }
.score-pill[data-band="yellow"] { background: color-mix(in srgb, #b26a00 10%, transparent); }
.score-pill[data-band="red"] { background: color-mix(in srgb, #b3261e 10%, transparent); }

.audit-head { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; margin: 0 0 12px; }
.audit-head h2 { margin: 4px 0 2px; }
.audit-head p { margin: 2px 0; }
.audit-score-box { display: grid; gap: 4px; justify-items: end; padding: 12px 16px; border: 1px solid var(--line, #d9d9dc); min-width: 180px; }
.audit-score-box .label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted, #6b6b70); }
.audit-score-box .score { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.audit-score-box[data-band="green"] .score { color: #2e7d32; }
.audit-score-box[data-band="yellow"] .score { color: #b26a00; }
.audit-score-box[data-band="red"] .score { color: #b3261e; }
.audit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.audit-section { margin: 0 0 18px; border: 1px solid var(--line, #d9d9dc); }
.audit-section > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--color-text, #1d1f20) 4%, transparent); }
.audit-section > header h3 { margin: 0; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.audit-section .report-table { margin: 0; }
.audit-results tr.failed td { background: color-mix(in srgb, #b3261e 6%, transparent); }
.audit-results td.rating { white-space: nowrap; }
.audit-results .note { font-style: italic; }

.rate-row { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-right: 8px; }
.rate-btn { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--line, #d9d9dc); background: transparent; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rate-btn.green { border-color: #2e7d32; color: #2e7d32; }
.rate-btn.yellow { border-color: #b26a00; color: #b26a00; }
.rate-btn.red { border-color: #b3261e; color: #b3261e; }
.rate-btn.na { color: var(--color-text-muted, #6b6b70); }
.rate-btn.selected { color: #fff; }
.rate-btn.selected.green { background: #2e7d32; }
.rate-btn.selected.yellow { background: #b26a00; }
.rate-btn.selected.red { background: #b3261e; }
.rate-btn.selected.na, .rate-btn.selected:not(.green):not(.yellow):not(.red) { background: var(--color-text, #1d1f20); }
span.rate-btn { cursor: default; }

.audit-photos, .audit-issues, .audit-recipients, .audit-failed { margin: 0; padding-left: 18px; }
.audit-photos li, .audit-issues li, .audit-recipients li, .audit-failed li { margin: 0 0 6px; }

.rating-systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rating-system { border: 1px solid var(--line, #d9d9dc); padding: 10px 12px; }
.rating-system h4 { margin: 0 0 8px; font-size: 14px; }
.rating-system h4 .text-muted { display: block; font-weight: 400; font-size: 12px; }
.rating-system .btn { margin-top: 8px; }

.audits-rollup .trend[data-trend="up"] { color: #2e7d32; }
.audits-rollup .trend[data-trend="down"] { color: #b3261e; }
.audits-rollup .trend[data-trend="flat"] { color: var(--color-text-muted, #6b6b70); }

.btn-small { padding: 2px 8px; font-size: 12px; }

@media (max-width: 720px) {
  .audit-head { grid-template-columns: 1fr; }
  .audit-score-box { justify-items: start; }
}