/* ==========================================================================
   Forms
   Figma UI Kit "Input" (Default / filled / error), "dropdown" and
   "text-imput": a bordered box (58px tall) holding the label (subtle 12/15,
   muted) above the value (text 18/25). Errors show under the field without
   moving the layout (they sit in the 26px row gap, as in Figma).
   Validation behaviour: js/modules/form-validation.js.
   ========================================================================== */

@layer components {
  /* At most two fields per row (each column is at least half the width),
     and two only while each can be at least 240px (room for the dropdown's
     text and icon); otherwise one per row. */
  .form {
    --form-gap: 1.625rem; /* 26 */

    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, max(15rem, (100% - var(--form-gap)) / 2)), 1fr)
    );
    gap: var(--form-gap);
  }

  .form__full,
  .form__actions {
    grid-column: 1 / -1;
  }

  /* The submit button at the end of the row, the submission result under
     it. */
  .form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  /* Figma: this btn instance is 118.84px wide (component default 184). */
  .form__submit {
    min-inline-size: 7.4275rem;
  }

  /* While sending (js/modules/form-submit.js): the label reads
     "Sending..." and further clicks are ignored. */
  .form__submit[aria-disabled="true"] {
    cursor: progress;
  }

  /* Submission result (a live region, js/modules/form-submit.js): white
     for success, error red for failure. Empty, it takes no room. */
  .form__status {
    color: var(--color-text);
    text-align: end;
  }

  .form__status:not(:empty) {
    margin-block-start: 0.25rem; /* 4, as the field errors */
  }

  .form__status[data-state="error"] {
    color: var(--color-error);
  }

  /* ------------------------------------------------------------------------
     Field
     ------------------------------------------------------------------------ */
  .form-field {
    position: relative;
  }

  .form-field__box {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem; /* 8 16 */
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-medium);
  }

  .form-field__label {
    color: var(--color-text-muted);
  }

  .form-field__control {
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
  }

  .form-field__control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
  }

  /* Browser autofill: keep the field's own colours instead of the browser's
     tint (the surface colour comes from the section: --form-field-surface). */
  .form-field__control:is(:autofill, :-webkit-autofill) {
    box-shadow: 0 0 0 100vmax var(--form-field-surface, var(--color-bg)) inset;
    -webkit-text-fill-color: currentColor;
  }

  /* Focus: fields keep their designed border, with no focus ring (on
     request); the caret marks a focused text field. Open accessibility
     item, accepted by the client: the dropdown has no visible keyboard
     focus (WCAG 2.4.7). */
  .form-field__control:focus-visible {
    outline: none;
  }

  /* Dropdown: the select fills the box (58px); Figma's framed chevron sits
     at the end and turns up, slowly, while the options list is open (:open;
     where unsupported it simply stays put). */
  .form-field--select .form-field__box {
    position: relative;
    padding: 0;
  }

  .form-field--select .form-field__box::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1rem;
    inline-size: 2rem;
    block-size: 2rem;
    background: url("../../assets/icons/arrow-down.svg") no-repeat center / contain;
    pointer-events: none;
    translate: 0 -50%;
    transition: rotate calc(var(--transition-duration) * 1.5) ease;
  }

  .form-field--select .form-field__box:has(.form-field__control:open)::after {
    rotate: 180deg;
  }

  .form-field--select .form-field__control {
    min-block-size: 3.5rem; /* 58 − borders */
    padding-inline: 1rem 3.5rem; /* text clears the 32px icon */
    appearance: none;
    cursor: pointer;
  }

  /* The open options list is not designed in Figma: the native list uses
     the page colours. */
  .form-field--select option {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  /* Where the options list can be styled (customizable select, Chromium),
     the option under the pointer turns grey instead of the system blue.
     Other browsers keep their native list. */
  @supports (appearance: base-select) {
    .form-field--select .form-field__control,
    .form-field--select .form-field__control::picker(select) {
      appearance: base-select;
    }

    .form-field--select .form-field__control {
      align-items: center;
    }

    .form-field--select .form-field__control::picker(select) {
      border: 1px solid var(--color-field-border);
      background-color: var(--color-bg);
    }

    .form-field--select .form-field__control::picker-icon,
    .form-field--select option::checkmark {
      display: none;
    }

    .form-field--select option {
      padding: 0.25rem 1rem;
    }

    /* The grey fill marks the active option, for the pointer and the
       keyboard alike; the site focus ring is not drawn here (in the list
       it only showed as a stray line under the option). */
    .form-field--select option:is(:hover, :focus-visible) {
      background-color: var(--color-bg-alt);
      outline: none;
    }
  }

  /* Textarea: Figma box 191px tall; the text area fills it and can grow. */
  .form-field--textarea .form-field__box {
    min-block-size: 11.9375rem; /* 191 */
  }

  .form-field--textarea .form-field__control {
    flex-grow: 1;
    resize: vertical;
  }

  /* ------------------------------------------------------------------------
     Error state (aria-invalid set by the validation script)
     ------------------------------------------------------------------------ */
  .form-field:has([aria-invalid="true"]) .form-field__box {
    border-color: var(--color-error);
  }

  .form-field:has([aria-invalid="true"]) .form-field__label,
  .form-field__control[aria-invalid="true"] {
    color: var(--color-error);
  }

  .form-field__error {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    margin-block-start: 0.25rem; /* 4 — Figma: error field 77 = 58 + 4 + 15 */
    color: var(--color-error);
  }
}