/* file-upload — @tokens: --file-upload-icon-size

   A dropzone that wraps a hidden native <input type="file">. The root is the
   <label>, so a click anywhere on the zone opens the file picker while the input
   stays keyboard-focusable behind the sr-only pattern. `__zone` is the visible
   dashed panel; `.is-dragover` is JS-toggled onto it during a drag.

   Token-only: the glyph box has no semantic token in the scale, so it's a
   component token with a literal fallback — the same dial pattern
   icon-button.css uses (`var(--icon-button-icon-size, 20px)`). The hover /
   dragover tint reads --brand-pale (a declared L2 token). Everything else reads
   a semantic/L1 token. */
.hzo-file-upload {
    display: block;
    cursor: pointer;
}

/* Native input — visually hidden (sr-only) but kept in the tab order + as the
   drop target. */
.hzo-file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* Visible dropzone — the dashed panel the user sees and drags onto. */
.hzo-file-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    border: var(--border-2) dashed var(--border);
    border-radius: var(--radius-panel);
    background: var(--bg-alt);
    color: var(--text-muted);
    text-align: center;
    transition: border-color var(--transition-base) ease, background var(--transition-base) ease;
}

/* Leading glyph — fixed box, muted ink. */
.hzo-file-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--file-upload-icon-size, 40px);
    height: var(--file-upload-icon-size, 40px);
    color: var(--text-muted);
}
.hzo-file-upload__icon > svg { display: block; }

/* Prompt text — can carry a bolded <strong> "Browse" + a muted remainder. */
.hzo-file-upload__text {
    font-size: var(--fs-100);
    line-height: var(--lh-normal);
}

/* Hover / dragover — brand border + subtle brand tint to signal the live drop
   target. Two spellings of one meaning: :hover for pointer, `.is-dragover` for
   the JS-toggled drag state. */
.hzo-file-upload:hover .hzo-file-upload__zone,
.hzo-file-upload__zone.is-dragover {
    border-color: var(--brand);
    background: var(--brand-pale);
}

/* A11y — required. Focus lives on the sr-only input; surface the ring on the
   visible zone via the sibling combinator. Disabled state. Reduced-motion is
   handled globally by components/_base/a11y.css. */
.hzo-file-upload__input:focus-visible ~ .hzo-file-upload__zone {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-file-upload.is-disabled,
.hzo-file-upload__input[disabled] ~ .hzo-file-upload__zone,
.hzo-file-upload__input[aria-disabled="true"] ~ .hzo-file-upload__zone {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-file-upload__zone { transition: none; }
}