/* ── Form field wrapper ── */
.field {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-1);
}

.field-label {
  font-size:   var(--text-sm);
  font-weight: var(--fw-medium);
  color:       var(--color-text);
  line-height: var(--leading-tight);
}

.field-label .required {
  color:       var(--color-danger);
  margin-left: var(--sp-1);
}

/* ── Base input styles ── */
.input,
.select,
.textarea {
  width:        100%;
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  color:        var(--color-text);
  background:   var(--color-surface);
  border:       1px solid var(--color-border-strong);
  border-radius:var(--r-md);
  transition:   border-color var(--dur-base) var(--ease-in-out),
                box-shadow   var(--dur-base) var(--ease-in-out);
  outline:      none;
  appearance:   none;
  -webkit-appearance: none;
}

.input, .select {
  min-height: var(--input-h);
  padding:    var(--sp-1) var(--sp-3);
}

.textarea {
  padding:    var(--sp-2) var(--sp-3);
  resize:     vertical;
  min-height: 80px;
  line-height:var(--leading-normal);
}

/* Focus */
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-ring);
}

/* Error state */
.input.is-error,
.select.is-error,
.textarea.is-error {
  border-color: var(--color-danger);
}
.input.is-error:focus,
.select.is-error:focus,
.textarea.is-error:focus {
  box-shadow: 0 0 0 3px var(--color-danger-ring);
}

/* Disabled */
.input:disabled,
.select:disabled,
.textarea:disabled {
  background:    var(--color-surface-raised);
  color:         var(--color-text-disabled);
  cursor:        not-allowed;
  border-color:  var(--color-border);
}

/* Placeholder */
.input::placeholder,
.textarea::placeholder { color: var(--color-text-muted); }

/* ── Input sizes ── */
.input-sm, .select-sm { height: var(--input-h-sm); font-size: var(--text-xs); padding: 0 var(--sp-2); }
.input-lg, .select-lg { height: var(--input-h-lg); font-size: var(--text-base); }

/* ── Input with icon ── */
.input-wrap {
  position:   relative;
  display:    flex;
  align-items:center;
}
.input-wrap .input { padding-left: var(--sp-8); }
.input-wrap .input-wrap-icon {
  position:    absolute;
  left:        var(--sp-3);
  display:     flex;
  align-items: center;
  color:       var(--color-text-muted);
  pointer-events: none;
}
.input-wrap .input-wrap-action {
  position:    absolute;
  right:       var(--sp-2);
  display:     flex;
  align-items: center;
}

/* ── Select custom arrow ── */
.select {
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--sp-3) center;
  cursor: pointer;
}

/* ── Hint / error message ── */
.field-hint  { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }
.field-error { font-size: var(--text-xs); color: var(--color-danger-fg);  line-height: var(--leading-snug); }

/* ── Checkbox and Radio ── */
.check-wrap {
  display:    flex;
  align-items:center;
  gap:        var(--sp-2);
  cursor:     pointer;
}

.check-input {
  width:         16px;
  height:        16px;
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  background:    var(--color-surface);
  cursor:        pointer;
  appearance:    none;
  -webkit-appearance: none;
  flex-shrink:   0;
  transition:    background var(--dur-fast) var(--ease-in-out),
                 border-color var(--dur-fast) var(--ease-in-out);
  position:      relative;
}

.check-input[type="radio"] { border-radius: var(--r-full); }

.check-input:checked {
  background:   var(--color-primary);
  border-color: var(--color-primary);
}

.check-input[type="checkbox"]:checked::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 5l2.5 2.5 4-4'/%3E%3C/svg%3E") center/10px no-repeat;
}

.check-input[type="radio"]:checked::after {
  content:       '';
  position:      absolute;
  inset:         3px;
  background:    #fff;
  border-radius: var(--r-full);
}

.check-input:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
}

.check-label {
  font-size:  var(--text-sm);
  color:      var(--color-text);
  line-height:var(--leading-tight);
}

/* ── Toggle / Switch ── */
.toggle-wrap {
  display:    flex;
  align-items:center;
  gap:        var(--sp-2);
  cursor:     pointer;
}

.toggle-input { display: none; }

.toggle-track {
  position:      relative;
  width:         36px;
  height:        20px;
  background:    var(--color-border-strong);
  border-radius: var(--r-full);
  transition:    background var(--dur-base) var(--ease-in-out);
  flex-shrink:   0;
}

.toggle-thumb {
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         16px;
  height:        16px;
  background:    #fff;
  border-radius: var(--r-full);
  box-shadow:    var(--shadow-xs);
  transition:    transform var(--dur-base) var(--ease-out);
}

.toggle-input:checked ~ .toggle-track { background: var(--color-primary); }
.toggle-input:checked ~ .toggle-track .toggle-thumb { transform: translateX(16px); }

.toggle-input:focus-visible ~ .toggle-track {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Color input ── */
.color-input {
  height:            36px;
  padding:           0;
  border:            1px solid var(--color-border);
  border-radius:     var(--r-md);
  cursor:            pointer;
  -webkit-appearance: none;
  appearance:        none;
  background:        none;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch         { border: none; border-radius: calc(var(--r-md) - 1px); }