@layer components {
  /* ---------------------------------------------------------------
   * Field — wraps label, control, helper/message, counter
   * --------------------------------------------------------------- */
  .field {
    --field-radius: var(--radius-md);
    /* Default border meets WCAG 1.4.11 (≥3:1 vs canvas) */
    --field-border: oklch(0.64 0.01 55);
    --field-border-hover: var(--color-stone-700);
    --field-border-focus: var(--color-brand-600);
    --field-ring: oklch(from var(--color-brand-600) l c h / 0.18);
    --field-bg: var(--color-canvas);
    --field-fg: var(--color-ink);
    /* Placeholder meets WCAG 1.4.3 (≥4.5:1 vs canvas) */
    --field-placeholder: var(--color-stone-500);
    --field-affix-fg: var(--color-ink-medium);
    --field-affix-bg: oklch(from var(--color-canvas) calc(l - 0.02) c h);
    --field-label-fg: var(--color-ink-dark);
    --field-helper-fg: var(--color-ink-medium);
    --field-message-fg: var(--color-ink-medium);
    --field-message-icon: var(--color-ink-light);

    --field-padding-block: 0.625rem;
    --field-padding-inline: 0.75rem;
    --field-font-size: var(--text-base);
    --field-min-block-size: 2.75rem;
    --field-affix-size: 1rem;

    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-family: var(--font-sans);
    inline-size: 100%;

    html[data-theme="dark"] & {
      --field-affix-bg: oklch(from var(--color-canvas) calc(l + 0.03) c h);
      --field-border: var(--color-stone-500);
      --field-border-hover: var(--color-stone-400);
      --field-placeholder: var(--color-stone-400);
      --field-ring: oklch(from var(--color-brand-400) l c h / 0.22);
      --field-border-focus: var(--color-brand-400);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --field-affix-bg: oklch(from var(--color-canvas) calc(l + 0.03) c h);
        --field-border: var(--color-stone-500);
        --field-border-hover: var(--color-stone-400);
        --field-placeholder: var(--color-stone-400);
        --field-ring: oklch(from var(--color-brand-400) l c h / 0.22);
        --field-border-focus: var(--color-brand-400);
      }
    }
  }

  /* Sizes */
  .field--sm {
    --field-padding-block: 0.375rem;
    --field-padding-inline: 0.625rem;
    --field-font-size: var(--text-small);
    --field-min-block-size: 2rem;
    --field-affix-size: 0.875rem;
  }

  .field--lg {
    --field-padding-block: 0.8125rem;
    --field-padding-inline: 0.875rem;
    --field-font-size: var(--text-medium);
    --field-min-block-size: 3.25rem;
    --field-affix-size: 1.125rem;
  }

  /* ---------------------------------------------------------------
   * Label row — label + optional badge/secondary action
   * --------------------------------------------------------------- */
  .field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--inline-space);
  }

  .field__label {
    color: var(--field-label-fg);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.005em;
  }

  .field__optional {
    color: var(--color-ink-light);
    font-weight: 400;
    margin-inline-start: 0.25rem;
  }

  .field__required {
    color: var(--color-negative);
    margin-inline-start: 0.125rem;
  }

  .field__label-action {
    color: var(--color-link);
    font-size: var(--text-x-small);
    font-weight: 500;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* ---------------------------------------------------------------
   * Control — the visual "input box"; may contain affixes
   * --------------------------------------------------------------- */
  .field__control {
    position: relative;
    display: flex;
    align-items: stretch;
    min-block-size: var(--field-min-block-size);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;

    &:hover {
      border-color: var(--field-border-hover);
    }

    &:focus-within {
      border-color: var(--field-border-focus);
      box-shadow: 0 0 0 var(--focus-ring-size) var(--field-ring);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  /* ---------------------------------------------------------------
   * The native control
   * --------------------------------------------------------------- */
  .field__input,
  .field__textarea {
    flex: 1 1 auto;
    min-inline-size: 0;
    font: inherit;
    font-size: var(--field-font-size);
    line-height: 1.4;
    color: var(--field-fg);
    background: transparent;
    border: 0;
    outline: none;
    padding-block: var(--field-padding-block);
    padding-inline: var(--field-padding-inline);
    border-radius: inherit;
    appearance: none;

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

    &:disabled {
      cursor: not-allowed;
      color: var(--color-ink-light);
    }

    /* Strip number-input spinners — we provide our own affix UI */
    &[type="number"] {
      -moz-appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    /* Strip search-input default UI */
    &[type="search"] {
      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button {
        -webkit-appearance: none;
      }
    }
  }

  .field__textarea {
    resize: vertical;
    min-block-size: calc(var(--field-min-block-size) * 2);
    font-family: inherit;
  }

  /* ---------------------------------------------------------------
   * Affix — prefix / suffix slot inside the control
   * --------------------------------------------------------------- */
  .field__affix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding-inline: var(--field-padding-inline);
    color: var(--field-affix-fg);
    font-size: var(--field-font-size);
    line-height: 1;
    user-select: none;
    flex: 0 0 auto;
  }

  /* Filled affix — e.g. https://, .com, currency switcher */
  .field__affix--filled {
    background: var(--field-affix-bg);
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    border-color: var(--field-border);
  }

  .field__affix--prefix.field__affix--filled {
    border-inline-end: 1px solid var(--field-border);
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
  }

  .field__affix--suffix.field__affix--filled {
    border-inline-start: 1px solid var(--field-border);
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
  }

  /* Slim affix (icon/symbol) — sits inside the field without bg */
  .field__affix--prefix:not(.field__affix--filled) {
    padding-inline-end: 0;
  }

  .field__affix--suffix:not(.field__affix--filled) {
    padding-inline-start: 0;
  }

  /* Icon glyph inside affix (sized via custom prop) */
  .field__icon {
    inline-size: var(--field-affix-size);
    block-size: var(--field-affix-size);
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Inline button inside affix (e.g. show-password toggle).
   * Minimum 24×24 target — meets WCAG 2.2 SC 2.5.8 across all field sizes. */
  .field__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5rem;
    min-block-size: 1.5rem;
    padding: 0.25rem;
    margin: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-ink-medium);
    cursor: pointer;
    font: inherit;
    line-height: 1;

    &:hover {
      color: var(--color-ink-dark);
      background: var(--color-highlight);
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: 1px;
    }
  }

  /* ---------------------------------------------------------------
   * Helper, counter, message rows
   * --------------------------------------------------------------- */
  .field__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--inline-space);
    min-block-size: 1.125rem;
  }

  .field__helper,
  .field__message {
    font-size: var(--text-x-small);
    line-height: 1.4;
    color: var(--field-helper-fg);
  }

  .field__message {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.375rem;
    color: var(--field-message-fg);

    & .field__icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
      margin-block-start: 0.125rem;
      color: var(--field-message-icon);
    }
  }

  .field__counter {
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    color: var(--color-ink-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .field__counter--over {
    color: var(--color-negative);
  }

  /* ---------------------------------------------------------------
   * Validation states
   * --------------------------------------------------------------- */
  /* Validation borders meet WCAG 1.4.11 (≥3:1 vs canvas) */
  .field--success {
    --field-border: oklch(0.58 0.17 145);
    --field-border-hover: oklch(0.52 0.18 145);
    --field-border-focus: oklch(0.52 0.18 145);
    --field-ring: oklch(0.55 0.17 145 / 0.22);
    --field-message-fg: oklch(0.42 0.12 145);
    --field-message-icon: oklch(0.55 0.17 145);
  }

  .field--warning {
    --field-border: oklch(0.62 0.17 60);
    --field-border-hover: oklch(0.56 0.17 55);
    --field-border-focus: oklch(0.56 0.17 55);
    --field-ring: oklch(0.66 0.16 65 / 0.22);
    --field-message-fg: oklch(0.45 0.10 60);
    --field-message-icon: oklch(0.62 0.17 60);
  }

  .field--error {
    --field-border: var(--color-danger-500);
    --field-border-hover: var(--color-danger-600);
    --field-border-focus: var(--color-danger-600);
    --field-ring: oklch(from var(--color-danger-600) l c h / 0.22);
    --field-message-fg: var(--color-danger-700);
    --field-message-icon: var(--color-danger-600);

    html[data-theme="dark"] & {
      --field-message-fg: oklch(0.78 0.15 25);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --field-message-fg: oklch(0.78 0.15 25);
      }
    }
  }

  /* ---------------------------------------------------------------
   * Disabled / Read-only
   * --------------------------------------------------------------- */
  .field--disabled {
    --field-bg: oklch(from var(--color-canvas) calc(l - 0.03) c h);
    --field-fg: var(--color-ink-light);
    --field-label-fg: var(--color-ink-light);
    --field-affix-fg: var(--color-ink-light);
    cursor: not-allowed;

    & .field__control:hover {
      border-color: var(--field-border);
    }

    & .field__input,
    & .field__textarea {
      cursor: not-allowed;
    }
  }

  .field--readonly {
    --field-bg: oklch(from var(--color-canvas) calc(l - 0.02) c h);
    --field-border-focus: var(--field-border);
    --field-ring: transparent;
  }

  #borrower_select_wrapper {
    display: contents;
  }
}