/**
 * KATA Upload — Filepond skin with KATA design tokens.
 * Source spec: docs/superpowers/specs/2026-05-28-upload-component-design.md §6
 * @package KATA
 * @since 5.28.0
 */

/* Container around the file input */
.kata-upload {
    margin: 1.5rem 0;
}

/* Topic-gated visibility (contact page): hidden until the selected enquiry
   topic is one that benefits from photos. JS toggles this class. */
.kata-upload.is-topic-hidden {
    display: none;
}

.kata-upload__label {
    display: block;
    font-family: var(--ff-display, 'Bebas Neue', sans-serif);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: var(--c-white, #fff);
    margin-bottom: 0.25rem;
}

.kata-upload__hint {
    font-family: var(--ff-body, 'Outfit', sans-serif);
    font-size: 0.875rem;
    color: var(--c-mute, rgba(255, 255, 255, 0.55));
    margin: 0 0 0.75rem 0;
}

/* Filepond root — base typography */
.filepond--root {
    font-family: var(--ff-body, 'Outfit', sans-serif);
    font-size: 0.875rem;
}

/* Idle dropzone — dashed gold border on dark bg */
.filepond--drop-label {
    color: var(--c-mute, rgba(255, 255, 255, 0.55));
    min-height: 88px;
}
.filepond--panel-root {
    background: transparent;
    border: 2px dashed rgba(254, 197, 62, 0.4); /* --c-gold @ 40% */
    border-radius: 8px;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

/* Hover / drag-over state */
.filepond--root.filepond--hopper[data-hopper-state="drag-over"] .filepond--panel-root,
.filepond--root:hover .filepond--panel-root {
    border-color: var(--c-gold, #fec53e);
    background: rgba(254, 197, 62, 0.08);
}

.filepond--label-action {
    color: var(--c-gold, #fec53e);
    text-decoration-color: var(--c-gold, #fec53e);
    font-weight: 500;
}

/* Per-file uploaded thumbnail */
.filepond--item {
    width: calc(33% - 0.5em);
}
.filepond--item-panel {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

/* Action button (cancel/remove) — gold pill */
.filepond--file-action-button {
    background-color: var(--c-gold, #fec53e);
    color: var(--c-dark, #292929);
}

/* Error state — red border */
.filepond--item[data-filepond-item-state="processing-error"] .filepond--item-panel,
.filepond--item[data-filepond-item-state="load-invalid"] .filepond--item-panel {
    background: rgba(221, 51, 51, 0.12);
    border: 1px solid #d33;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .filepond--panel-root,
    .filepond--item {
        transition: none;
    }
}

/* Mobile: touch target ≥44px (KATA standard) */
@media (max-width: 720px) {
    .filepond--drop-label {
        min-height: 120px;
        padding: 1rem;
    }
    .filepond--item {
        width: calc(50% - 0.5em);
    }
}