/**
 * kbnx-states.css — Skeleton-loader + empty-state components (Wave 2 PHASE-04-T19).
 *
 * Lightweight, dependency-free CSS surfaces that any kbnx component can drop
 * into a loading or empty placeholder context. All visual values come from
 * tokens declared in kbnx-tokens.css so dark / high-contrast / forced-colors
 * inherit automatically.
 *
 * Skeleton:
 *   <div class="kbnx-skeleton" data-rows="3"></div>
 *   <div class="kbnx-skeleton kbnx-skeleton--card"></div>
 *
 * Empty state:
 *   <div class="kbnx-empty-state">
 *     <div class="kbnx-empty-state__illustration">…SVG…</div>
 *     <h2 class="kbnx-empty-state__title">No docs yet</h2>
 *     <p class="kbnx-empty-state__body">Create your first doc to get started.</p>
 *     <div class="kbnx-empty-state__actions">…</div>
 *   </div>
 *
 * No JS required. The skeleton shimmer respects prefers-reduced-motion.
 */

/* === Skeleton loader ===================================================== */

.kbnx-skeleton {
    background: linear-gradient(
        90deg,
        var(--kbnx-color-surface-sunken, #f3f4f6) 0%,
        var(--kbnx-color-surface-hover, #e5e7eb) 50%,
        var(--kbnx-color-surface-sunken, #f3f4f6) 100%
    );
    background-size: 200% 100%;
    animation: kbnx-skeleton-shimmer var(--kbnx-duration-slow, 360ms) ease-in-out infinite;
    border-radius: var(--kbnx-radius-sm, 0.25rem);
    display: block;
    height: 1rem;
    margin: 0 0 var(--kbnx-space-2, 0.5rem);
}

.kbnx-skeleton:last-child {
    margin-bottom: 0;
}

.kbnx-skeleton--text {
    height: 0.875rem;
    width: 100%;
}

.kbnx-skeleton--text:nth-of-type(2n) {
    width: 92%;
}

.kbnx-skeleton--text:nth-of-type(3n) {
    width: 76%;
}

.kbnx-skeleton--title {
    height: var(--kbnx-font-size-xl, 1.25rem);
    margin-bottom: var(--kbnx-space-3, 0.75rem);
    width: 60%;
}

.kbnx-skeleton--avatar {
    border-radius: var(--kbnx-radius-full, 999px);
    height: 2.5rem;
    width: 2.5rem;
}

.kbnx-skeleton--card {
    border-radius: var(--kbnx-radius-lg, 0.75rem);
    height: 8rem;
    width: 100%;
}

.kbnx-skeleton--button {
    border-radius: var(--kbnx-radius-sm, 0.25rem);
    height: 2.25rem;
    width: 8rem;
}

@keyframes kbnx-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Reduced-motion: drop the shimmer; keep the surface tone for affordance. */
@media (prefers-reduced-motion: reduce) {
    .kbnx-skeleton {
        animation: none;
        background: var(--kbnx-color-surface-sunken, #f3f4f6);
    }
}

/* Forced-colors mode: use system-defined surface tokens. */
@media (forced-colors: active) {
    .kbnx-skeleton {
        animation: none;
        background: ButtonFace;
        border: 1px solid ButtonBorder;
    }
}

/* === Empty state ========================================================== */

.kbnx-empty-state {
    align-items: center;
    color: var(--kbnx-color-text-secondary, #4b5563);
    display: flex;
    flex-direction: column;
    gap: var(--kbnx-space-3, 0.75rem);
    padding: var(--kbnx-space-8, 2rem) var(--kbnx-space-4, 1rem);
    text-align: center;
}

.kbnx-empty-state__illustration {
    color: var(--kbnx-color-text-muted, #6b7280);
    display: inline-flex;
    height: 5rem;
    width: 5rem;
}

.kbnx-empty-state__illustration > svg {
    height: 100%;
    width: 100%;
}

.kbnx-empty-state__title {
    color: var(--kbnx-color-text-primary, #1f2937);
    font-size: var(--kbnx-font-size-xl, 1.25rem);
    font-weight: var(--kbnx-fw-semibold, 600);
    line-height: var(--kbnx-line-height-snug, 1.35);
    margin: 0;
}

.kbnx-empty-state__body {
    color: var(--kbnx-color-text-secondary, #4b5563);
    font-size: var(--kbnx-font-size-base, 1rem);
    line-height: var(--kbnx-line-height-normal, 1.5);
    margin: 0;
    max-width: 36ch;
}

.kbnx-empty-state__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbnx-space-2, 0.5rem);
    justify-content: center;
    margin-top: var(--kbnx-space-2, 0.5rem);
}

.kbnx-empty-state__action {
    border-radius: var(--kbnx-radius-md, 0.5rem);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--kbnx-font-size-sm, 0.875rem);
    font-weight: var(--kbnx-fw-medium, 500);
    padding: var(--kbnx-space-2, 0.5rem) var(--kbnx-space-4, 1rem);
    text-decoration: none;
    transition:
        background-color var(--kbnx-duration-fast, 140ms) var(--kbnx-ease-out, ease),
        transform var(--kbnx-duration-fast, 140ms) var(--kbnx-ease-out, ease),
        box-shadow var(--kbnx-duration-fast, 140ms) var(--kbnx-ease-out, ease);
}

.kbnx-empty-state__action--primary {
    background: var(--kbnx-color-accent, #2563eb);
    color: var(--kbnx-color-text-on-accent, #ffffff);
}

.kbnx-empty-state__action--primary:hover {
    background: var(--kbnx-color-accent-hover, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: var(--kbnx-shadow-md, 0 6px 16px rgba(15, 34, 56, 0.08));
}

.kbnx-empty-state__action--secondary {
    background: transparent;
    color: var(--kbnx-color-accent, #2563eb);
    border: 1px solid var(--kbnx-color-border-default, #848a94);
}

.kbnx-empty-state__action--secondary:hover {
    background: var(--kbnx-color-surface-hover, #f3f4f6);
    border-color: var(--kbnx-color-accent, #2563eb);
}

.kbnx-empty-state__action:focus-visible {
    box-shadow: var(--kbnx-shadow-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.35));
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .kbnx-empty-state__action {
        transition: none;
    }

    .kbnx-empty-state__action--primary:hover {
        transform: none;
    }
}

/* === Inline status — single-line variant ================================ */

.kbnx-status-inline {
    align-items: center;
    color: var(--kbnx-color-text-secondary, #4b5563);
    display: inline-flex;
    font-size: var(--kbnx-font-size-sm, 0.875rem);
    gap: var(--kbnx-space-2, 0.5rem);
}

.kbnx-status-inline--loading::before {
    animation: kbnx-status-pulse 1.4s ease-in-out infinite;
    background: var(--kbnx-color-accent, #2563eb);
    border-radius: var(--kbnx-radius-full, 999px);
    content: '';
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
}

.kbnx-status-inline--success::before {
    background: var(--kbnx-color-success, #15803d);
    border-radius: var(--kbnx-radius-full, 999px);
    content: '';
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
}

.kbnx-status-inline--error::before {
    background: var(--kbnx-color-error, #dc2626);
    border-radius: var(--kbnx-radius-full, 999px);
    content: '';
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
}

@keyframes kbnx-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .kbnx-status-inline--loading::before {
        animation: none;
    }
}

/* === Adopters — wire existing patterns into state primitive vocabulary ===
 * Wave 2 PHASE-04-T19: rather than refactor every component to remove its
 * legacy class names, we recognise three existing wait-state surfaces here so
 * they all share the same animation curve, dot indicator, and reduced-motion
 * fallback as kbnx-status-inline--loading. New components should use the
 * primitive class directly; these aliases keep the contract stable.
 */
.kbnx-search-suggest__hint:not(:empty)::before {
    animation: kbnx-status-pulse 1.4s ease-in-out infinite;
    background: var(--kbnx-color-accent, #2563eb);
    border-radius: var(--kbnx-radius-full, 999px);
    content: '';
    display: inline-block;
    height: 0.5rem;
    margin-right: var(--kbnx-space-2, 0.5rem);
    width: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .kbnx-search-suggest__hint:not(:empty)::before {
        animation: none;
    }
}

.kbnx-related-docs[data-kbnx-state="loading"] .kbnx-related-docs__list,
.kbnx-popular-docs[data-kbnx-state="loading"] .kbnx-popular-docs__list {
    background: linear-gradient(
        90deg,
        var(--kbnx-color-surface-sunken, #f3f4f6) 0%,
        var(--kbnx-color-surface-hover, #e5e7eb) 50%,
        var(--kbnx-color-surface-sunken, #f3f4f6) 100%
    );
    background-size: 200% 100%;
    animation: kbnx-skeleton-shimmer var(--kbnx-duration-slow, 360ms) ease-in-out infinite;
    border-radius: var(--kbnx-radius-md, 0.5rem);
    min-height: 4rem;
}

@media (prefers-reduced-motion: reduce) {
    .kbnx-related-docs[data-kbnx-state="loading"] .kbnx-related-docs__list,
    .kbnx-popular-docs[data-kbnx-state="loading"] .kbnx-popular-docs__list {
        animation: none;
        background: var(--kbnx-color-surface-sunken, #f3f4f6);
    }
}