.inputs-preview {
  min-height: 100vh;
  padding: var(--space-page-desktop);
}

.inputs-preview__shell {
  max-width: 720px;
}

.inputs-preview__header {
  margin-bottom: var(--space-section-gap);
}

.inputs-stage {
  display: grid;
  gap: var(--space-section-gap);
  padding: var(--container-padding);
  background: var(--container-background);
  border: var(--container-border);
  border-radius: var(--container-radius);
}

.input-group {
  display: grid;
  gap: var(--space-8);   /* label → champ = unité de sens (§4.3 label-gap), plus serré que field→field (body 12) */
}

.ds-input {
  width: 100%;
  min-height: var(--input-height);
  padding: 0 var(--input-padding-inline);
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  color: var(--input-text);
  background: var(--input-background);
  border: var(--input-border);
  border-radius: var(--input-radius);
  transition: var(--input-transition);
}

.ds-input::placeholder {
  color: var(--input-placeholder);
}

/* Contrôles natifs (date picker, steppers) rendus en sombre — sinon popup/icônes clairs. */
.ds-input[type="date"],
.ds-input[type="number"] {
  color-scheme: dark;
}

/* Champ date : déclencheur compact (comme un input) + calendrier DS en popover. */
.ds-datefield {
  position: relative;
}

.ds-datefield__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--input-height);
  padding: 0 var(--input-padding-inline);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  color: var(--input-text);
  background: var(--input-background);
  border: var(--input-border);
  border-radius: var(--input-radius);
  cursor: pointer;
  transition: var(--input-transition);
}

.ds-datefield__trigger:focus-visible {
  outline: none;
  border: var(--input-border-focus);
}

.ds-datefield__trigger svg {
  width: var(--space-16);
  height: var(--space-16);
  flex-shrink: 0;
  color: var(--color-text-secondary);
  stroke-width: var(--icon-stroke-width);
}

/* Calendrier INLINE (dans le flux) : dans un modal, un popover absolute déborde/dérive
   au scroll. Inline → pousse le contenu, scrolle avec le corps, ne sort jamais du modal. */
.ds-datefield__popover {
  margin-top: var(--space-8);
}

.ds-datefield__popover[hidden] {
  display: none;
}

.ds-input:focus-visible {
  outline: none;
  border: var(--input-border-focus);
}

.ds-input:disabled {
  color: var(--input-disabled-text);
  background: var(--input-disabled-background);
  border: var(--input-disabled-border);
  cursor: not-allowed;
}

.ds-input--error {
  border: var(--input-error-border);
}

.input-error-msg {
  color: var(--input-error-text);
}

/* File input — natif restylé : le bouton du sélecteur reprend le chrome d'un bouton
   ghost sm (affordance DS), le nom de fichier passe en texte secondaire. On garde la
   sémantique + le clavier natifs (pas de trigger custom masqué). */
.ds-file-field {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--color-text-secondary);
}

.ds-file-field::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--button-height-xs);
  margin-right: var(--space-12);
  padding: 0 var(--button-padding-inline-xs);
  font-family: var(--font-body);
  font-size: var(--button-font-size-xs);
  line-height: var(--button-line-height);
  font-weight: var(--button-font-weight-xs);
  color: var(--button-ghost-text);
  background: var(--button-ghost-background);
  border: var(--button-ghost-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--button-transition);
}

.ds-file-field::file-selector-button:hover {
  background: var(--button-ghost-background-hover);
  border: var(--button-ghost-border-hover);
}

.ds-file-field:focus-visible {
  outline: none;
}

.ds-file-field:focus-visible::file-selector-button {
  border: var(--border-focus);
}

@media (max-width: 640px) {
  .inputs-preview {
    padding: var(--space-page-mobile);
  }
}