/*
 * A native file input renders browser-locale chrome ("Choose file / No file
 * chosen") that no stylesheet can reach. The real input stays in the form for
 * validation and keyboard access; the label carries the visible control.
 */
.fs-file-field {
  display: grid;
  gap: var(--fs-space-1);
  min-width: 0;
  cursor: pointer;
}

.fs-file-field__label {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fs-file-field__control {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  min-height: var(--fs-control-height);
  padding: 4px 10px 4px 4px;
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-sm);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.fs-file-field:hover .fs-file-field__control {
  border-color: var(--fs-color-primary-line);
}

.fs-file-field input:focus-visible + .fs-file-field__control {
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-file-field__button {
  flex: 0 0 auto;
  padding: 6px 12px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border-radius: var(--fs-radius-sm);
  font-size: var(--fs-text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.fs-file-field__name {
  min-width: 0;
  overflow: hidden;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-file-field__name--selected {
  color: var(--fs-color-text);
}

/* Kept in the layout for focus and validation, but never painted. */
.fs-file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}