/* Washly UI kit: skeletons, inline validation, keyboard shortcuts help. */

:root {
    --wu-accent: #4f46e5;
    --wu-skeleton-base: #e5e7eb;
    --wu-skeleton-shine: #f3f4f6;
}

/* ---- Keyboard shortcuts help ---- */
.wu-kbd-help {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wu-kbd-help.show { display: flex; }

.wu-kbd-help-card {
    background: #fff;
    color: #1f2937;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.wu-kbd-help-card h3 { margin: 0 0 14px; }
.wu-kbd-help-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.18); }
.wu-kbd-help-row:last-child { border-bottom: 0; }

.wu-kbd {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ---- Skeleton loading ---- */
.wu-skeleton {
    background: linear-gradient(90deg, var(--wu-skeleton-base) 25%, var(--wu-skeleton-shine) 37%, var(--wu-skeleton-base) 63%);
    background-size: 400% 100%;
    animation: wu-shimmer 1.4s ease infinite;
    border-radius: 6px;
    color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
}

.wu-skeleton-line { height: 14px; margin: 8px 0; }
.wu-skeleton-line.wu-w-60 { width: 60%; }
.wu-skeleton-line.wu-w-40 { width: 40%; }
.wu-skeleton-block { height: 96px; }

@keyframes wu-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .wu-skeleton { animation: none; }
}

/* ---- Inline validation ---- */
.wu-invalid { border-color: #e60023 !important; box-shadow: 0 0 0 2px rgba(230, 0, 35, 0.15) !important; }
.wu-field-error { color: #e60023; font-size: 12.5px; margin-top: 4px; display: block; }