/* field — label + control + hint; inputs are sunken */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.field__label {
  color: var(--c-text);
  font-size: var(--fs);
}

.field__label--required::after {
  content: " *";
  color: var(--c-accent);
}

.field__hint {
  color: var(--c-text-faint);
  font-size: var(--fs-s);
}

.field__error {
  color: var(--c-error);
  font-size: var(--fs-s);
}

.field__control {
  display: flex;
  gap: var(--sp-2);
  min-width: 0;
}

.field__control > .input {
  flex: 1;
}

.input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: 3px var(--sp-3);
  border: 1px solid;
  border-color: var(--bevel-sunken);
  border-radius: 0;
  background: var(--c-bg-sunken);
  color: var(--c-text);
  font-size: var(--fs);
  appearance: none;
}

.input:focus {
  background: var(--c-bg-deep);
  outline: none;
}

.input::placeholder {
  color: var(--c-text-faint);
}

.input:disabled,
.input[readonly] {
  color: var(--c-text-dim);
}

.input--mono {
  font-family: var(--font-mono);
}

.input--invalid {
  border-color: var(--c-error);
}

textarea.input {
  min-height: 90px;
  padding: var(--sp-3);
  resize: vertical;
  line-height: 1.45;
}

select.input {
  padding-right: 26px;
  background-image:
    linear-gradient(var(--c-bg), var(--c-bg)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23d8dfd3' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 top 0, right 6px center;
  background-size: 19px 100%, 8px 5px;
  cursor: pointer;
}

/* iOS zooms into inputs smaller than 16px — avoid on touch devices */
@media (pointer: coarse) {
  .input {
    font-size: 16px;
  }
}

/* check — custom VGUI checkbox / radio */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 20px;
  cursor: pointer;
  user-select: none;
}

.check__box {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border: 1px solid;
  border-color: var(--bevel-sunken);
  background: var(--c-bg-sunken);
  appearance: none;
  cursor: pointer;
}

.check__box[type="radio"] {
  border-radius: 50%;
}

.check__box:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--c-accent);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 40% 70%);
}

.check__box[type="radio"]:checked::after {
  inset: 3px;
  border-radius: 50%;
  clip-path: none;
}

.check__text {
  min-width: 0;
}

.check__hint {
  display: block;
  color: var(--c-text-faint);
  font-size: var(--fs-s);
}

@media (pointer: coarse) {
  .check__box {
    width: 18px;
    height: 18px;
  }
}

/* form layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-6);
}

.form-grid__wide {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3) var(--sp-6);
}