/*
 * Forms — fields, inputs, hints, errors, and the password toggle.
 * DESIGN.md §4 "Inputs". All values from shared/tokens.css.
 */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field + .field {
  margin-top: var(--space-4);
}

.field__label {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-comment);
}

.input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-foreground);
  background-color: var(--color-deep-night);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}

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

.input:hover {
  border-color: var(--color-comment);
}

.input:focus-visible {
  border-color: var(--color-purple);
  box-shadow: var(--glow-purple);
}

.input[readonly] {
  color: var(--color-comment);
  background-color: var(--color-night);
  cursor: default;
}

/* Copy-me fields (invite and call links) stay calm on hover, but keep the focus ring:
   keyboard users land on them. */
.input[readonly]:hover {
  border-color: var(--color-border);
}

.input[aria-invalid="true"] {
  border-color: var(--color-red);
}

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

.field__hint {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-comment);
}

.field__error {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-red);
}

/* ---- Password field with visibility toggle ---- */

.password-field__control {
  position: relative;
}

.password-field__control .input {
  padding-right: calc(44px + var(--space-2));
}

.password-field__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-comment);
  background: transparent;
  border: 0;
  border-radius: var(--radius-standard);
  cursor: pointer;
  transition: color 120ms ease;
}

.password-field__toggle:hover {
  color: var(--color-foreground);
}

.password-field__toggle:focus-visible {
  color: var(--color-foreground);
  outline: none;
  box-shadow: var(--glow-purple);
}

/* ---- Switch: a checkbox drawn as a switch; still a real checkbox (works without JS).
   Apps' Checking toggle and Meet's permission toggles. ---- */

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  margin: 0;
  appearance: none;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--color-foreground);
  border-radius: var(--radius-circle);
  transition: transform 120ms ease;
}

.switch:checked {
  background-color: var(--color-purple);
}

.switch:checked::before {
  transform: translateX(16px);
}

.switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.switch:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}