/* =============================================================================
   InputField — styles
   ─────────────────────────────────────────────────────────────────────────────
   Six states handled automatically:
     Default        — resting
     Focused        — :focus-within
     Filled         — same as default (CSS doesn't distinguish; value just shows)
     Error          — .field--error
     Error focused  — .field--error :focus-within
     Disabled       — .field--disabled

   Four affix types (mutually exclusive, matching Figma):
     Default              — no affix
     Action - Icon        — .field__action--icon       (24x24 button)
     Action - Text        — .field__action--text       (brand text)
     Action - Text + Icon — .field__action--text-icon  (brand text + trailing icon)
     2nd Text             — .field__secondary          (non-clickable span)
   ========================================================================== */

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* Figma: 8px between label / shell / caption */
  font-family: var(--font-body);
}

/* ─── Label ───────────────────────────────────────────────────────────────── */
.field__label {
  font-size: 12px;
  font-weight: 600;           /* Figma: SemiBold */
  line-height: 1;
  letter-spacing: 0.12px;    /* Figma: tracking 0.12px */
  color: var(--text-secondary);
}

/* ─── Input shell (the bordered container) ────────────────────────────────── */
.field__shell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  background: var(--surface-raised-1);
  border: 1px solid var(--border-neutrals-secondary);
  border-radius: var(--radius-sm);
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

/* Focused (no error) — lifted surface, brand border */
.field:not(.field--error):not(.field--disabled) .field__shell:focus-within {
  background: var(--surface-raised-2);
  border-color: var(--border-brand-default);
}

/* Error — red border at all times */
.field--error .field__shell {
  border-color: var(--border-error-transparent-primary);
}

/* Disabled — muted surface, faint border */
.field--disabled .field__shell {
  background: var(--surface-disabled);
  border-color: var(--border-neutrals-tertiary);
  cursor: not-allowed;
}

/* ─── Input control ───────────────────────────────────────────────────────── */
.field__control {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  padding: 0;
  /* Font size is size-specific — see .field--md / .field--lg overrides below */
}

.field__control::placeholder {
  color: var(--text-tertiary);
  opacity: 1; /* Firefox lowers placeholder opacity by default */
}

.field__control:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

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

/* ─── Sizes ───────────────────────────────────────────────────────────────── */
/* Shell heights */
.field--md .field__shell { height: 40px; }
.field--lg .field__shell { height: 48px; }

/* Control typography — Figma: Mobile=14px/20lh/0.14ls, Desktop=16px/24lh/0.16ls */
.field--md .field__control {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.14px;
}
.field--lg .field__control {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
}

/* ─── Leading icon (non-clickable) ────────────────────────────────────────── */
.field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-secondary);
  flex-shrink: 0;
}

.field--disabled .field__icon {
  color: var(--icon-disabled);
}

/* ─── Action affixes (all clickable, all <button>) ────────────────────────── */
.field__action {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}

.field__action:disabled {
  cursor: not-allowed;
}

/* Action - Icon — 24x24 button with subtle hover */
.field__action--icon {
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: var(--radius-xxs);
  color: var(--icon-secondary);
}

.field__action--icon:hover:not(:disabled) {
  color: var(--icon-primary);
  background: var(--fill-brand-transparent-subtle);
}

.field__action--icon:disabled {
  color: var(--icon-disabled);
}

/* Action - Text — brand-coloured 14px text, clickable */
.field__action--text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-brand);
}

.field__action--text:hover:not(:disabled) {
  opacity: 0.8;
}

.field__action--text:disabled {
  color: var(--text-disabled);
}

/* Action - Text + Icon — brand text + trailing icon (e.g. picker chevron) */
.field__action--text-icon {
  gap: var(--space-xs);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-brand);
}

.field__action--text-icon:hover:not(:disabled) {
  opacity: 0.8;
}

.field__action--text-icon:disabled {
  color: var(--text-disabled);
}

.field__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icon inherits currentColor from the button — re-themes with the partner */
}

/* ─── Secondary text (2nd Text variant — non-clickable) ───────────────────── */
.field__secondary {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.field--disabled .field__secondary {
  color: var(--text-disabled);
}

/* ─── Caption / helper text ───────────────────────────────────────────────── */
.field__caption {
  font-size: 12px;
  font-weight: 600;          /* Figma: SemiBold — same style as label */
  line-height: 1.4;
  letter-spacing: 0.12px;   /* Figma: tracking 0.12px */
  color: var(--text-secondary);
}

.field--error .field__caption {
  color: var(--text-danger);
}

.field--disabled .field__caption {
  color: var(--text-disabled);
}