/* Form fields.
   .ui-field            label + control + hint/error, stacked
     __label, __optional, __control (wrapper for leading icon / trailing button), __hint, __error, __counter
   .ui-input            <input>, <textarea class="ui-input ui-input--textarea">, <select class="ui-input ui-input--select">
   .ui-field__control   position wrapper: __leading (icon), __trailing (icon button / spinner)
   States: :hover, :focus-visible (ring + accent border), :disabled, [readonly],
   [aria-invalid="true"] or .is-invalid, .is-loading on __control (spinner in the trailing slot).
   The field is a size container: side-by-side label below 480 px is never used. */

@layer reset, tokens, base, layout, components, apps, utilities;

@layer components {
  .ui-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    min-width: 0;
  }

  .ui-field__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
  }

  .ui-field__optional {
    color: var(--color-text-subtle);
    font-weight: var(--font-weight-medium);
  }

  .ui-field__hint,
  .ui-field__error,
  .ui-field__counter {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
  }

  .ui-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    color: var(--color-danger-text);
    font-weight: var(--font-weight-medium);
  }

  .ui-field__error > svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
  }

  .ui-field__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .ui-field__counter {
    flex: none;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ui-input {
    --_border: var(--color-border-strong);

    display: block;
    width: 100%;
    min-width: 0;
    height: var(--control-h-md);
    margin: 0;
    padding: 0 var(--space-3-5);
    border: var(--border-width) solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--color-bg-inset);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    appearance: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  /* 16 px on touch devices keeps iOS from zooming into the field. */
  @media (pointer: coarse) {
    .ui-input {
      font-size: var(--font-size-lg);
    }
  }

  .ui-input--textarea {
    height: auto;
    min-height: calc(var(--control-h-md) * 2);
    padding-block: var(--space-2-5);
    resize: vertical;
  }

  .ui-input--select {
    padding-right: var(--space-10);
    cursor: pointer;
  }

  @media (hover: hover) {
    .ui-input:hover:not(:disabled, :focus) {
      --_border: var(--color-border-hover);
    }
  }

  .ui-input.is-hovered {
    --_border: var(--color-border-hover);
  }

  .ui-input:focus,
  .ui-input.is-focus-visible {
    --_border: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-glow);
  }

  .ui-input:focus-visible {
    outline: none;
  }

  .ui-input[readonly] {
    background: var(--color-bg-surface-2);
  }

  .ui-input:disabled {
    --_border: var(--color-border);
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .ui-input:disabled::placeholder {
    color: var(--color-text-disabled);
  }

  .ui-input[aria-invalid="true"],
  .ui-input.is-invalid {
    --_border: var(--color-danger-text);
  }

  .ui-input[aria-invalid="true"]:focus,
  .ui-input.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--color-danger-soft);
  }

  /* Wrapper for icons and buttons inside the field box. */
  .ui-field__control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .ui-field__leading,
  .ui-field__trailing {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
  }

  .ui-field__leading {
    left: var(--space-3-5);
    pointer-events: none;
  }

  .ui-field__leading > svg {
    width: 18px;
    height: 18px;
  }

  .ui-field__trailing {
    right: var(--space-1);
  }

  .ui-field__control:has(.ui-field__leading) > .ui-input {
    padding-left: calc(var(--space-3-5) + 18px + var(--space-2-5));
  }

  .ui-field__control:has(.ui-field__trailing) > .ui-input {
    padding-right: calc(var(--icon-button-size) + var(--space-2));
  }

  /* Select chevron, drawn with borders so it follows the text colour. */
  .ui-field__control--select::after {
    content: "";
    position: absolute;
    right: var(--space-4);
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    pointer-events: none;
  }

  .ui-field__control.is-loading > .ui-field__trailing::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: var(--space-2-5);
    border: 2px solid var(--color-accent-text);
    border-right-color: transparent;
    border-radius: var(--radius-round);
    animation: ui-spin var(--duration-spin) linear infinite;
  }

  /* Fields in a row on wider containers. */
  .ui-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  @media (min-width: 480px) {
    .ui-field-row {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
  }
}