/* ==========================================================================
   HX Console — Phase 11 design layer
   Loaded after hx-phase10.css.

   The image upload control. Preview on the left, actions on the right, so the
   picture is the thing you look at while deciding rather than a filename.
   ========================================================================== */

.imgf-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }

.imgf-preview {
    flex: 0 0 auto;
    width: 148px;
    height: 111px;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.imgf-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.imgf-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--text-3); font-size: var(--t-xs); font-weight: 600;
}
.imgf-empty svg { width: 26px; height: 26px; fill: var(--text-3); opacity: .6; }

.imgf-actions { flex: 1 1 190px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.imgf-actions .btn { flex: 0 0 auto; }

/* A file input styled as a button. The input itself stays in the DOM and
   focusable rather than being replaced by a click handler, so the control still
   works from the keyboard and screen readers still announce it as a file
   chooser. */
.imgf-choose { position: relative; cursor: pointer; }
.imgf-choose input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.imgf-hint { flex: 1 1 100%; margin: 2px 0 0; line-height: 1.5; }

@media (max-width: 560px) {
    .imgf-preview { width: 100%; height: 150px; }
    .imgf-actions .btn { flex: 1 1 auto; justify-content: center; }
}