/* Quiet operator delight. Tokens only; motion is optional. */

.sk-delight-check {
    color: var(--success);
    display: block;
}

.sk-delight-check--sm {
    width: 16px;
    height: 16px;
}

.sk-delight-check__mark {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation: sk-delight-draw 600ms ease forwards;
}

@keyframes sk-delight-draw {
    to { stroke-dashoffset: 0; }
}

.sk-delight-empty.skui-empty {
    margin: 0 0 var(--space-4);
}

.sk-delight-empty--compact.skui-empty {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.sk-delight-empty--compact .skui-empty-title,
.sk-delight-empty--compact .skui-empty-body {
    text-align: left;
}

.sk-delight-empty--compact .skui-empty-body {
    max-width: none;
}

.sk-delight-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    color: var(--success);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--weight-medium, 500);
    white-space: nowrap;
}

.sk-delight-badge[hidden] {
    display: none !important;
}

.dash-pillbar:has(.sk-delight-badge) {
    align-items: center;
}

.dash-pillbar.is-delight-play [data-sk-delight-chip] {
    animation: sk-delight-shimmer 900ms ease;
}

@keyframes sk-delight-shimmer {
    0% { box-shadow: 0 0 0 0 transparent; }
    40% { box-shadow: 0 0 0 1px var(--success), 0 0 14px var(--success-soft); }
    100% { box-shadow: none; }
}

.sh-overall.is-delight-glow {
    animation: sk-delight-glow 1.4s ease forwards;
}

@keyframes sk-delight-glow {
    0% { box-shadow: 0 0 0 0 transparent; }
    40% { box-shadow: 0 0 0 1px var(--success), 0 0 22px var(--success-soft); }
    100% { box-shadow: 0 0 0 1px var(--success-soft); }
}

.sk-sidebar-logo-art.is-sk-delight-crown,
.sk-auth-brand a.is-sk-delight-crown,
.is-sk-delight-crown {
    position: relative;
    overflow: visible;
    z-index: 3;
}

.sk-delight-crown {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10050;
    width: 18px;
    height: 12px;
    margin-left: -9px;
    color: var(--warning, #f59e0b);
    opacity: 1;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .sk-delight-crown {
        animation: sk-delight-crown 700ms cubic-bezier(.2, .8, .2, 1) both;
    }
}

@keyframes sk-delight-crown {
    from { transform: translateY(-16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.sk-delight-toast p {
    margin: 0;
}

.sk-delight-toast {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 10080;
    opacity: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: min(24rem, calc(100vw - 2rem));
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm, 0.875rem);
    pointer-events: auto;
}

/* Org-dashboard status counts. The final digits stay in .sk-count-text
   (layout + screen readers). The counter paints on top for ~500ms.
   Does not touch the fleet-chip shimmer above. */
@property --sk-num {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

@keyframes sk-dash-count {
    from { --sk-num: 0; }
    to { --sk-num: var(--sk-count-to, 0); }
}

html.sk-count-on .dash .dash-overview-grid .stat-number[data-sk-count] {
    position: relative;
    --sk-num: 0;
    counter-reset: skn var(--sk-num);
    animation: sk-dash-count 500ms cubic-bezier(.22, .8, .32, 1) forwards;
    animation-iteration-count: 1;
    font-variant-numeric: tabular-nums;
}

html.sk-count-on .dash .dash-overview-grid .stat-number[data-sk-count] .sk-count-text {
    color: transparent;
}

html.sk-count-on .dash .dash-overview-grid .stat-number[data-sk-count]::after {
    content: attr(data-sk-count-prefix) counter(skn) attr(data-sk-count-suffix);
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .sk-delight-check__mark {
        animation: none;
        stroke-dashoffset: 0;
    }

    html.sk-count-on .dash .dash-overview-grid .stat-number[data-sk-count] {
        animation: none;
        --sk-num: var(--sk-count-to, 0);
    }

    html.sk-count-on .dash .dash-overview-grid .stat-number[data-sk-count] .sk-count-text {
        color: inherit;
    }

    html.sk-count-on .dash .dash-overview-grid .stat-number[data-sk-count]::after {
        content: none;
    }

    .dash-pillbar.is-delight-play [data-sk-delight-chip],
    .sh-overall.is-delight-glow,
    .sk-delight-crown {
        animation: none;
    }

    .sh-overall.is-delight-glow {
        box-shadow: 0 0 0 1px var(--success-soft);
    }

    .sk-delight-crown {
        transform: none;
        opacity: 1;
    }
}