/* Additions on top of admin.css for the accessibility system */
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; border-radius: 999px; font-weight: 700; font-size: 1rem; }
.score-lg { min-width: 4.5rem; height: 4.5rem; font-size: 1.8rem; }
.score-good { background: var(--success-bg); color: var(--success); }
.score-warn { background: var(--warning-bg); color: var(--warning); }
.score-poor { background: rgba(249, 115, 22, .15); color: #f97316; }
.score-crit { background: var(--danger-bg); color: var(--danger); }
.score-none { background: var(--bg-elevated); color: var(--text-secondary); font-size: .8rem; }

.impact { display: inline-block; padding: .1rem .5rem; border-radius: 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.impact-critical { background: var(--danger-bg); color: var(--danger); }
.impact-serious { background: rgba(249, 115, 22, .15); color: #f97316; }
.impact-moderate { background: var(--warning-bg); color: var(--warning); }
.impact-minor { background: var(--bg-elevated); color: var(--text-secondary); }

.counts { display: flex; gap: .5rem; flex-wrap: wrap; }
.counts .impact { min-width: 3.2rem; text-align: center; }

.snippet { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: .82rem; overflow-x: auto; white-space: pre; }
.code-block { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 240px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .two-col, .three-col { grid-template-columns: 1fr; } }

.trend { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.trend-bar { flex: 1; background: var(--accent); opacity: .7; border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
.trend-bar:hover { opacity: 1; }
.trend-bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .65rem; color: var(--text-secondary); white-space: nowrap; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem .9rem; }
.feature-grid label { display: flex; gap: .5rem; align-items: center; font-size: .9rem; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters .form-group { margin: 0; min-width: 140px; }
.filters select, .filters input { padding: .4rem .5rem; }
.muted-small { font-size: .8rem; color: var(--text-secondary); }
.log-box { background: #111; color: #ccc; font-family: 'JetBrains Mono', monospace; font-size: .74rem; padding: .75rem; border-radius: var(--radius); max-height: 300px; overflow: auto; white-space: pre-wrap; }
.help { font-size: .8rem; color: var(--text-secondary); margin-top: .2rem; }
.table td.wrap { white-space: normal; word-break: break-word; max-width: 420px; }
.status-pill { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary); }
.inline-form { display: inline; }