/* YouTube Analytics Dashboard — data-dashboard mood. Blue from the app's chart colour, red for severity. */
:root{
  --accent:#4aa8ff;
  --accent-hover:#2f94f5;
  --accent-soft:#4aa8ff22;
  --accent-2:#ff6b6d;
  --sev-high:#ff6b6d;
  --sev-med:#ffb340;
  --sev-ok:#3ddc97;
}
.btn-primary,.skip-link,.loop li::before{color:#04162b}
.loop li::before{background:linear-gradient(135deg,var(--accent),#7aa2ff)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--accent:#0b62c4;--accent-hover:#0a52a3;--accent-soft:#0b62c417;--accent-2:#c0262b;--sev-high:#c0262b;--sev-med:#9a5b00;--sev-ok:#0a7a4d}
  :root:not([data-theme="dark"]) .btn-primary,
  :root:not([data-theme="dark"]) .skip-link,
  :root:not([data-theme="dark"]) .loop li::before{color:#fff}
  :root:not([data-theme="dark"]) .eyebrow{color:#0a7566}
}
:root[data-theme="light"]{--accent:#0b62c4;--accent-hover:#0a52a3;--accent-soft:#0b62c417;--accent-2:#c0262b;--sev-high:#c0262b;--sev-med:#9a5b00;--sev-ok:#0a7a4d}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .skip-link,
:root[data-theme="light"] .loop li::before{color:#fff}
:root[data-theme="light"] .eyebrow{color:#0a7566}

/* ---- Dashboard pieces ---- */
.sev{display:inline-block;font-family:var(--font-mono);font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.16rem .55rem;border-radius:var(--radius-full);border:1px solid currentColor}
.sev-high{color:var(--sev-high)}
.sev-med{color:var(--sev-med)}
.sev-ok{color:var(--sev-ok)}
.tg-table td .sev{margin-right:.3rem}
.rule-note{font-size:.84rem;color:var(--text-muted)}
.callout-warn{border-color:color-mix(in srgb,var(--accent-2) 50%,var(--border-subtle));background:color-mix(in srgb,var(--accent-2) 9%,transparent)}