/* Shared helpers for wow components. Selectors are .wow-* only, so loading this
   sheet does not change existing pages. Colors come from metro.css / dashboard-v2.css
   tokens, which already track light, dark, and the five data-theme-level steps.
   Hosts set --wow-pct (0-100) on .wow-ring. Heat cells must include .wow-heat__label
   text or an icon so color is never the only signal. */

.wow-card {
    background: var(--metro-surface, #fff);
    color: var(--metro-text, var(--dash-ink, #111827));
    border: 1px solid var(--metro-border, var(--dash-line, #e5e7eb));
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--metro-shadow-sm, none);
    padding: var(--space-4, 1rem);
    transition: border-color var(--duration-ui, 200ms) var(--ease-out, ease), box-shadow var(--duration-ui, 200ms) var(--ease-out, ease);
}

.wow-ring {
    --wow-pct: 0;
    width: 4.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill, 999px);
    color: var(--metro-text, var(--dash-ink, #111827));
    background:
        radial-gradient(closest-side, var(--metro-surface, #fff) 68%, transparent 69% 100%),
        conic-gradient(
            var(--metro-primary, var(--dash-accent, #1a56db)) calc(var(--wow-pct) * 1%),
            var(--metro-surface-muted, var(--dash-line, #f1f5f9)) 0);
    transition: background var(--duration-ui, 200ms) var(--ease-out, ease);
}

.wow-heat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--metro-border, var(--dash-line, #e5e7eb));
    background: var(--metro-surface-muted, #f1f5f9);
    color: var(--metro-text, var(--dash-ink, #111827));
    transition: background-color var(--duration-ui, 200ms) var(--ease-out, ease), border-color var(--duration-ui, 200ms) var(--ease-out, ease);
}

.wow-heat--ok {
    background: var(--metro-status-success-soft, var(--metro-surface-muted, #f1f5f9));
    border-color: var(--metro-status-success-line, var(--metro-success, #057a55));
    color: var(--metro-status-success-ink, var(--metro-text, #111827));
}

.wow-heat--warn {
    background: var(--metro-status-warning-soft, var(--metro-surface-muted, #f1f5f9));
    border-color: var(--metro-status-warning-line, var(--metro-warning, #c27803));
    color: var(--metro-status-warning-ink, var(--metro-text, #111827));
}

.wow-heat--bad {
    background: var(--metro-status-danger-soft, var(--metro-surface-muted, #f1f5f9));
    border-color: var(--metro-status-danger-line, var(--metro-danger, #c81e1e));
    color: var(--metro-status-danger-ink, var(--metro-text, #111827));
}

.wow-heat--none {
    background: var(--metro-surface-muted, #f1f5f9);
    border-color: var(--metro-border, var(--dash-line, #e5e7eb));
    color: var(--metro-text-muted, var(--dash-muted, #5b6472));
}

.wow-heat__label {
    color: inherit;
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--weight-semibold, 600);
    line-height: var(--leading-tight, 1.25);
}

.wow-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--metro-text, var(--dash-ink, #111827));
}

.wow-rail__node {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    min-height: var(--metro-touch-target-min, 44px);
    padding-inline-end: var(--space-3, 0.75rem);
    color: var(--metro-text, var(--dash-ink, #111827));
    transition: color var(--duration-ui, 200ms) var(--ease-out, ease);
}

.wow-rail__node::before {
    content: "";
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--metro-primary, var(--dash-accent, #1a56db));
    box-shadow: 0 0 0 1px var(--metro-border, var(--dash-line, #e5e7eb));
}

.wow-rail__node:not(:last-child)::after {
    content: "";
    width: var(--space-4, 1rem);
    height: 2px;
    background: var(--metro-border-strong, var(--metro-border, #cbd5e1));
}

@media (prefers-reduced-motion: reduce) {
    .wow-card,
    .wow-ring,
    .wow-heat,
    .wow-heat--ok,
    .wow-heat--warn,
    .wow-heat--bad,
    .wow-heat--none,
    .wow-heat__label,
    .wow-rail,
    .wow-rail__node,
    .wow-rail__node::before,
    .wow-rail__node::after {
        animation: none;
        transition: none;
    }
}