/* form — fields, inputs, select, switch, checkbox, segmented */
@layer components {
  .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    min-inline-size: 0;
  }
  .field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); }
  .field__hint { font-size: var(--text-xs); color: var(--muted); }
  .field__error { font-size: var(--text-xs); color: var(--danger-text); }

  .form__fields {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;

    @media (width < 40rem) { grid-template-columns: minmax(0, 1fr); }

    /* Same-row pairs share a hint line so controls line up when only one field has copy. */
    > .field:not(:has(textarea)):not(:has(.field__hint)):not(:has(.field__error))::after {
      content: "\00a0";
      visibility: hidden;
      font-size: var(--text-xs);
      line-height: var(--leading-normal);
    }

    > .field:has(textarea),
    > .check:not(:has(.switch)),
    > .alert,
    > .field:not(:has(.input, .select, .segmented)),
    > .form__field--full { grid-column: 1 / -1; }
  }

  .form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--space-1);
    padding-block-start: var(--space-1);
  }

  .input {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: 0;
    min-block-size: var(--control-md);
    padding-inline: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: var(--border-width) solid var(--border-strong);
    color: var(--muted);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);

    &:focus-within { border-color: var(--accent); box-shadow: var(--ring); color: var(--ink-2); }
    &:has(:user-invalid) { border-color: var(--danger); box-shadow: 0 0 0 var(--ring-width) var(--danger-soft); }
    &:has(:disabled) { opacity: 0.6; }

    input, textarea {
      flex: 1;
      min-inline-size: 0;
      padding-block: var(--space-1);
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: var(--text-sm);

      &::placeholder { color: var(--muted); }
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--ink);
      caret-color: var(--ink);
      box-shadow: 0 0 0 1000px var(--surface-2) inset;
      transition: background-color 99999s ease-out 0s;
    }

    input[type="password"]::-ms-reveal {
      display: none;
    }

    input[type="password"]::-webkit-credentials-auto-fill-button,
    input[type="password"]::-webkit-textfield-decoration-container {
      visibility: hidden;
      pointer-events: none;
    }
    textarea { field-sizing: content; min-block-size: 4.5lh; resize: vertical; }

    kbd {
      padding: 0 var(--space-0-5);
      border-radius: var(--radius-xs);
      border: var(--border-width) solid var(--border-strong);
      font-size: var(--text-2xs);
    }

    .input__reveal {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      inline-size: var(--space-4);
      aspect-ratio: 1;
      margin-inline-end: calc(var(--space-1) * -1);
      border-radius: var(--radius-full);
      color: var(--muted);
      transition: background-color var(--dur-fast), color var(--dur-fast);

      > span { display: grid; }
      &:hover { background: var(--surface-sunken); color: var(--ink); }
      &:focus-visible { outline: none; box-shadow: var(--ring); color: var(--ink); }
      &[aria-pressed="true"] { color: var(--accent-strong); }
    }

    .htmx-indicator { opacity: 0; transition: opacity var(--dur); }
    &:has(.htmx-request) .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
  }

  /* custom select: trigger button; the list reuses .menu (see menu.css .listbox) */
  .select {
    display: block;
    min-inline-size: 0;
    &.select--pill { display: inline-block; }
  }

  .select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    inline-size: 100%;
    min-block-size: var(--control-md);
    padding-inline: var(--space-2) var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: var(--border-width) solid var(--border-strong);
    color: var(--ink);
    font-size: var(--text-sm);
    text-align: start;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);

    &:hover { border-color: color-mix(in oklab, var(--ink) 22%, var(--border-strong)); }
    &:focus-visible, &[aria-expanded="true"] { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

    .select__chevron { color: var(--muted); transition: rotate var(--dur) var(--ease-out); }
    &[aria-expanded="true"] .select__chevron { rotate: 180deg; color: var(--accent-strong); }

    .select--pill & {
      min-block-size: var(--control-sm);
      padding-inline: var(--space-2) var(--space-1);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
    }
  }

  .select__value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    span { overflow: hidden; text-overflow: ellipsis; }
  }

  /* the whole label is the hit area: at least --space-3 (24px) tall, the WCAG 2.5.8 minimum */
  .check {
    --check-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--space-3);
    font-size: var(--text-sm);
    cursor: pointer;

    input:not(.switch) { flex-shrink: 0; accent-color: var(--accent); inline-size: var(--check-size); block-size: var(--check-size); margin: 0; }
  }

  /* <input type="checkbox" role="switch"> */
  .switch {
    --switch-w: 2.6rem;
    --switch-inset: 0.2rem;
    --switch-thumb: 1.1rem;
    --switch-thumb-press: 1.4rem;
    --switch-travel: 1.1rem;
    --switch-travel-press: 0.8rem;
    appearance: none;
    position: relative;
    inline-size: var(--switch-w);
    block-size: var(--space-3);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out);

    &::before {
      content: "";
      position: absolute;
      inset-block: var(--switch-inset);
      inset-inline-start: var(--switch-inset);
      inline-size: var(--switch-thumb);
      border-radius: 50%;
      background: var(--surface-2);
      box-shadow: var(--shadow-sm);
      transition: translate var(--dur) var(--ease-out), inline-size var(--dur) var(--ease-out);
    }
    &:active::before { inline-size: var(--switch-thumb-press); }
    &:checked:active::before { translate: var(--switch-travel-press) 0; }
    &:checked { background: var(--accent); }
    &:checked::before { translate: var(--switch-travel) 0; }
    &:focus-visible { outline: none; box-shadow: var(--ring); }
  }

  /* radio group rendered as a pill segmented control */
  .segmented {
    position: relative;
    display: inline-flex;
    inline-size: fit-content;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-0-5);
    gap: var(--space-0-5);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);

    label {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      gap: var(--space-0-5);
      padding: var(--space-1) calc(var(--space-1) + var(--space-0-5));
      white-space: nowrap;
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      color: var(--muted);
      cursor: pointer;
      transition: background-color var(--dur), color var(--dur);

      &:has(:checked) { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-sm); }
      &:has(:focus-visible) { box-shadow: var(--ring); }
    }
    input { position: absolute; opacity: 0; pointer-events: none; }

    &[data-labels="selected"] label:has(.icon):not(:has(:checked)) .segmented__label {
      position: absolute;
      inline-size: var(--border-width);
      block-size: var(--border-width);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* once the Alpine pill indicator is measured it replaces the static highlight */
    &:has(.pill-indicator.is-ready) label:has(:checked) { background: transparent; box-shadow: none; }
  }
}