/* ============================================================
   Component · Input / Textarea / Select / Checkbox / Radio / Toggle
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--gio-space-2);
}
.field__label {
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-strong);
}
.field__hint {
  font-size: var(--gio-text-xs);
  color: var(--gio-color-text-muted);
}
.field__error {
  font-size: var(--gio-text-xs);
  color: var(--gio-color-danger);
}

.input,
.textarea,
.select {
  width: 100%;
  height: 40px;
  padding: 0 var(--gio-space-4);
  font-family: inherit;
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text);
  background: var(--gio-color-surface);
  border: 1px solid var(--gio-color-border-strong);
  border-radius: var(--gio-radius-md);
  transition: border-color var(--gio-dur-fast) var(--gio-ease-out),
              box-shadow var(--gio-dur-fast) var(--gio-ease-out);
}
.textarea { height: auto; padding: var(--gio-space-3) var(--gio-space-4); min-height: 96px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--gio-color-text-faint); }

.input:hover, .textarea:hover, .select:hover { border-color: var(--gio-color-text-muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gio-color-action);
  box-shadow: var(--gio-focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--gio-color-bg-subtle);
  color: var(--gio-color-text-disabled);
  cursor: not-allowed;
}
.input--error, .textarea--error { border-color: var(--gio-color-danger); }
.input--error:focus, .textarea--error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.25); }

.checkbox, .radio {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--gio-color-border-strong);
  background: var(--gio-color-surface);
  cursor: pointer;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  transition: all var(--gio-dur-fast) var(--gio-ease-out);
}
.checkbox { border-radius: 4px; }
.radio { border-radius: 50%; }
.checkbox:hover, .radio:hover { border-color: var(--gio-color-action); }
.checkbox:checked, .radio:checked {
  background: var(--gio-color-action);
  border-color: var(--gio-color-action);
}
.checkbox:checked::after {
  content: ''; width: 10px; height: 10px;
  background: white;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.radio:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: white; }
.checkbox:focus-visible, .radio:focus-visible { outline: none; box-shadow: var(--gio-focus-ring); }

.toggle {
  appearance: none;
  width: 36px; height: 20px;
  background: var(--gio-color-border-strong);
  border-radius: var(--gio-radius-pill);
  cursor: pointer;
  position: relative;
  transition: background var(--gio-dur-fast) var(--gio-ease-out);
}
.toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  transition: left var(--gio-dur-fast) var(--gio-ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle:checked { background: var(--gio-color-action); }
.toggle:checked::after { left: 18px; }
.toggle:focus-visible { outline: none; box-shadow: var(--gio-focus-ring); }