/* feature-specific styles for reports (see styles/features.css for shared pieces) */
.reports .report-nav { animation: page-in var(--t-base) var(--ease-out) both; }
.reports .report-nav a { transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.reports .report-nav a:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand-ink); }
.reports .report-nav a.active { box-shadow: 0 4px 14px -6px var(--brand); }
.reports .report-nav a.active:hover { color: var(--on-solid); }

.report-controls { min-height: 38px; }
.reports [data-body] { display: block; transition: opacity var(--t-fast); }
.reports [data-body].loading-soft { opacity: .45; pointer-events: none; }
.reports [data-body] > .col > * { animation: page-in var(--t-base) var(--ease-out) both; }

.reports .chart-card { display: flex; flex-direction: column; gap: 10px; }
.reports .chart-card h3 { display: flex; align-items: center; gap: 8px; }
.reports .chart-card h3 svg.ic { width: 18px; height: 18px; color: var(--brand); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }

.reports .section-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.reports .section-h svg.ic { width: 18px; height: 18px; color: var(--text-4); }

.reports .tbl td .progress { display: inline-block; vertical-align: middle; }
.reports .rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-xs); }
.reports .rank.r1 { background: linear-gradient(135deg, #F5A623, #FFCF6B); color: #4A2B00; }
.reports .rank.r2 { background: linear-gradient(135deg, #B9C2CE, #E3E9F0); color: #33404F; }
.reports .rank.r3 { background: linear-gradient(135deg, #C98A5B, #E8B78E); color: #4A2B12; }

.reports .health-dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.reports .health-dot.silent { animation: pulse-soft 2.4s ease-in-out infinite; }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (max-width: 900px) { .reports .grid-4 { grid-template-columns: repeat(2, 1fr); } }