/* Form field with a floating label (CSS only, same technique as Bootstrap).

   <div class="field">
     <input class="field__input" id="email" name="email" type="email" placeholder=" "
            aria-describedby="email-error">
     <label class="field__label" for="email">Email address</label>
     <p class="field__error" id="email-error"></p>
   </div>

   - The input comes before its label, and needs placeholder=" " so CSS can tell when it is empty.
   - Error state: set aria-invalid="true" on the input and put the message in .field__error
     (JS while typing, PHP after submit). An empty .field__error takes no space.
   - Works the same for <select> (label always floated) and <textarea>. */

.field {
  position: relative;
  display: grid;
  align-content: start; /* side by side, a neighbour's error makes the row taller: keep this input its own height */
  gap: var(--sp-1);
}

.field__input {
  width: 100%;
  min-height: var(--field-h); /* also holds selects to the same height */
  padding: var(--sp-6) var(--sp-4) var(--sp-2);
  font-size: var(--fs-body);                    /* 16px: phones do not zoom */
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2); /* 8px, the same as cards */
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

/* Fields show the ring on any focus, mouse included, as Bootstrap does. */
.field__input:focus {
  border-color: var(--c-focus-border);
  outline: var(--border-1) solid transparent;
  box-shadow: var(--focus-ring);
}

/* Chrome, Edge and Safari paint autofilled fields pale blue (Firefox pale yellow) with a background that
   CSS cannot override, so a wide inset shadow in the page colour covers it; the focus ring sits on top. */
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text);
  box-shadow: inset 0 0 0 var(--sp-24) var(--c-page);
}

.field__input:-webkit-autofill:focus {
  box-shadow: var(--focus-ring), inset 0 0 0 var(--sp-24) var(--c-page);
}

.field__input:autofill {
  box-shadow: inset 0 0 0 var(--sp-24) var(--c-page);
}

.field__input:autofill:focus {
  box-shadow: var(--focus-ring), inset 0 0 0 var(--sp-24) var(--c-page);
}

textarea.field__input {
  min-height: var(--sp-24);
  resize: vertical;
}

/* Selects get our own chevron, 16px in from the right edge, instead of the browser's arrow tight against it. */
select.field__input {
  padding-right: var(--sp-12);
  appearance: none;
  background: var(--c-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='rgb(92,93,92)' stroke-width='1.5' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right var(--sp-4) center / var(--sp-4);
}

.field__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sp-4);
  border: var(--border-1) solid transparent; /* same box as the input, so the text lines up */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--duration-fast) var(--ease);
}

/* Float the label up when the field has focus, has content, is autofilled, or is a select with a choice
   (a select still on its empty first choice keeps its label inside, like an empty input). */
.field__input:focus ~ .field__label,
.field__input:not(select, :placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
select.field__input:not(:has(option[value=""]:checked)) ~ .field__label {
  /* Shrinking also shrinks the label's left padding, so nudge it right to stay in line with the typed text. */
  transform: translate(calc(var(--sp-4) * 0.2), calc(-1 * var(--sp-2))) scale(0.8);
}

.field__input[aria-invalid="true"] {
  border-color: var(--c-error);
}

/* A field in error keeps its red border and gets a red ring, as in Bootstrap. */
.field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 var(--sp-1) var(--c-error-ring);
}

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

.field__error:empty {
  display: none;
}

.field__input:disabled {
  color: var(--c-text-muted);
  background-color: var(--c-surface);
  cursor: not-allowed;
}