/* Form field (shared/_field): label / input / help / inline error — the form-errors
   pattern's rendering half. .field-pulse is the paste-fill cue (connection_string). */
@layer components {
  .field {
    margin-bottom: var(--space-4);
  }

  .field-label {
    display: block;
    font: var(--type-control-sm);
    margin-bottom: var(--space-1);
    color: var(--text);
  }

  .field-input {
    display: block;
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    padding: var(--space-2) var(--space-3);
    font: var(--type-input);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-fast) var(--ease-smooth);
  }
  textarea.field-input {
    field-sizing: content;
    min-height: 4rem; /* ~3 rows before field-sizing grows it — a floor, not a gap */
    max-height: 50vh;
  }

  /* Native select chrome varies per OS; the chevron is two gradients (the system ships no
     icon set) and the extra right padding is the room it needs. */
  select.field-input {
    appearance: none;
    padding-right: var(--space-6);
    background-image: linear-gradient(45deg, transparent 49%, var(--text-secondary) 50%),
      linear-gradient(-45deg, transparent 49%, var(--text-secondary) 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 15px center, right 11px center;
    background-repeat: no-repeat;
  }

  /* The ring is the system's one focus signal; the accent border is the separate
     "this field is live" cue, so a focused field reads as focused without it. */
  .field-input:focus {
    border-color: var(--accent);
  }
  .field-input-error {
    border-color: var(--error);
  }

  .field-help {
    margin-top: var(--space-1);
    font: var(--type-small);
    color: var(--text-secondary);
  }

  .field-error {
    margin-top: var(--space-1);
    font: var(--type-small);
    color: var(--error-text);
  }

  /* One-shot tint on an input the connection-string paste just filled — a calm "here's
     what changed" cue. Runs a touch longer than UI transitions so the fill registers;
     reduced-motion users get the polite status text only (global rule collapses it). */
  .field-pulse {
    animation: field-fill var(--duration-fill) var(--ease-smooth);
  }
  @keyframes field-fill {
    from {
      background-color: color-mix(in oklch, var(--accent) 14%, var(--surface));
    }
    to {
      background-color: var(--surface);
    }
  }
}