/* ============================================
   xm-file-input — generic file picker / dropzone on XmField (Story 2.9).

   Extends XmField for chrome but renders its own layout: a label row, a dropzone
   surface (the focusable button), the selected-file rows, and the helper/error
   row. State machinery (disabled / form-association / focus / ARIA) is inherited;
   this file styles the dropzone, file rows, and the byte-size text.

   Surface & ink (AD-13): the dropzone rides the inverse-surface card tier —
   primary copy is inverse-on-surface, the secondary hint + size are the muted
   tier. The icon takes the card ink.

   Borders: the dropzone is a hairline 1px (outline-variant → outline on hover).
   The DRAG-ACTIVE state is the ONE place a 2px border is allowed — 2px solid the
   coral --md-sys-color-primary, with the focus-ring halo. Coral here signals the
   live drop target, never severity (AD-11). Errors are the warn icon + copy.

   BEM block: `file-input`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   ============================================ */

.file-input {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}

/* ---------- Label ---------- */
.file-input__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size) /
    var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);
}
.file-input__label-text {
  letter-spacing: 0;
}
.file-input__required {
  color: var(--md-sys-color-primary);
  font-weight: 700;
  line-height: 1;
}

/* ---------- Hidden native input — kept out of layout + tab order ---------- */
.file-input__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Dropzone — the focusable button surface ---------- */
.file-input__dropzone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  box-sizing: border-box;
  padding: var(--s-4) var(--s-4);
  /* Hairline + a 1px transparent inset so the box does not jump when the
     drag-active 2px border lands (the inset absorbs the extra 1px). */
  border: 1px solid var(--md-sys-color-outline-variant);
  outline: 1px solid transparent;
  outline-offset: -2px;
  border-radius: var(--md-sys-shape-corner-button);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  cursor: pointer;
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.file-input__dropzone:hover {
  border-color: var(--md-sys-color-outline);
}
.file-input__dropzone:focus-visible {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

.file-input__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-inverse-on-surface);
}
.file-input__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.file-input__primary {
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size) /
    var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
}
.file-input__secondary {
  color: var(--xm-color-inverse-on-surface-muted);
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
}

/* ---------- Drag-active — the ONLY 2px border in the system ---------- */
.file-input--drag-active .file-input__dropzone {
  border: 2px solid var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

/* ---------- Selected-file rows — raised level1 cards ---------- */
.file-input__files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.file-input__file {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  box-sizing: border-box;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-inverse-surface);
  box-shadow: var(--md-sys-elevation-level1);
}
.file-input__file-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-inverse-on-surface);
}
.file-input__file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size) /
    var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
}
.file-input__file-size {
  flex-shrink: 0;
  color: var(--xm-color-inverse-on-surface-muted);
  font:
    var(--xm-typescale-mono-weight)
    var(--xm-typescale-mono-size) /
    var(--xm-typescale-mono-line-height)
    var(--xm-typescale-mono-font);
}
.file-input__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--xm-color-inverse-on-surface-muted);
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.file-input__remove:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-inverse-on-surface)
      var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
  color: var(--md-sys-color-inverse-on-surface);
}
.file-input__remove:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

/* ---------- Disabled — reduced emphasis ----------
   No opacity (it would dim the copy below AA). The dropzone children
   (__primary / __secondary / __icon) each set their own color, so the swap
   must target them directly — they do NOT inherit a color set on __dropzone.
   A muted container fill restores the visual "disabled" cue the opacity used
   to give. */
.file-input--disabled .file-input__dropzone {
  cursor: not-allowed;
  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 5%, var(--md-sys-color-inverse-surface));
  border-color: var(--md-sys-color-outline-variant);
}
.file-input--disabled .file-input__dropzone:hover {
  border-color: var(--md-sys-color-outline-variant);
}
.file-input--disabled .file-input__primary,
.file-input--disabled .file-input__secondary,
.file-input--disabled .file-input__icon {
  color: var(--xm-color-inverse-on-surface-disabled);
}
.file-input--disabled .file-input__label {
  color: var(--xm-color-inverse-on-surface-disabled);
}

/* ---------- Helper / error message row ----------
   Severity is the warn icon + copy, not a color (rule 3a). */
.file-input__message {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: 1em;
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
}
.file-input__message--helper {
  color: var(--xm-color-inverse-on-surface-muted);
}
.file-input__message--error {
  color: var(--md-sys-color-inverse-on-surface);
}
.file-input__error-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--md-sys-color-inverse-on-surface);
}
.file-input__message-text {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}