/* AuDHD staging additions — audhd-overview
   Loaded after app.css; overrides apply.
   Lives in web-staging only; never deployed to prod. */

/* ── Task C: Global "Wat hapert er?" chip strip ───────────────────────
   Sits at the very top of /Overview, above hero cards. One horizontal
   line summarising every degraded service so the user gets a 5-second
   triage instead of an N-page scan. */
.ah-triage-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding: 0;
    min-height: 32px;
}

.ah-triage-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    line-height: 1.2;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--color-line);
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.ah-triage-chip:hover,
.ah-triage-chip:focus-visible {
    transform: translateY(-1px);
    background: var(--surface-3);
    border-color: var(--color-line-strong);
    outline: none;
}

.ah-triage-chip-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ah-triage-chip-detail {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

/* Subdued severity tints — calm-control-room, never harsh. */
.ah-triage-chip--stale {
    border-color: rgba(255, 196, 96, 0.22);
    background: rgba(255, 196, 96, 0.06);
}

.ah-triage-chip--rate_limited {
    border-color: rgba(255, 168, 80, 0.28);
    background: rgba(255, 168, 80, 0.08);
}

.ah-triage-chip--error {
    border-color: rgba(232, 120, 120, 0.32);
    background: rgba(232, 120, 120, 0.09);
}

/* Light theme: the dark-derived rgba above is invisible on white;
   use darker tints + readable semantic text colors. */
[data-theme="light"] .ah-triage-chip--stale {
    border-color: rgba(180, 83, 9, 0.45);
    background: rgba(180, 83, 9, 0.12);
    color: var(--color-warning-text);
}

[data-theme="light"] .ah-triage-chip--rate_limited {
    border-color: rgba(180, 83, 9, 0.50);
    background: rgba(217, 119, 6, 0.13);
    color: var(--color-warning-text);
}

[data-theme="light"] .ah-triage-chip--error {
    border-color: rgba(185, 28, 28, 0.45);
    background: rgba(185, 28, 28, 0.12);
    color: var(--color-error-text);
}

.ah-triage-more {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    padding: 0 0.25rem;
}