/* ================================================================
   INPUT / FIELD COMPONENT
   7 states × 3 sizes + password toggle + icons
   Budget: < 4KB minified
   ================================================================ */

/* ── FIELD WRAPPER ───────────────────────────────────────────── */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ── LABEL ───────────────────────────────────────────────────── */

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: 1.4;
}

/* ── INPUT WRAPPER (contains input + icons + toggle) ─────────── */

.field__wrapper {
    position: relative;
}

/* ── INPUT BASE ──────────────────────────────────────────────── */

.field__input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--bg-surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--input-radius);
    transition: var(--input-transition);
    outline: none;
}
.field__input::placeholder {
    color: var(--text-placeholder);
}

/* ── SIZES ───────────────────────────────────────────────────── */

.field--sm .field__input {
    height: var(--input-height-sm);
    padding: 0 var(--input-padding-x-sm);
    font-size: var(--input-text-sm);
}
.field--md .field__input {
    height: var(--input-height-md);
    padding: 0 var(--input-padding-x-md);
    font-size: var(--input-text-md);
}
.field--lg .field__input {
    height: var(--input-height-lg);
    padding: 0 var(--input-padding-x-lg);
    font-size: var(--input-text-lg);
}

/* ── HOVER STATE ─────────────────────────────────────────────── */

.field__input:hover:not(:focus):not(:disabled):not(:read-only) {
    border-color: var(--border-strong);
}

/* ── FOCUS STATE ─────────────────────────────────────────────── */

.field__input:focus {
    border-color: var(--accent-primary);
    box-shadow: var(--accent-focus-ring);
}

/* ── ERROR STATE ─────────────────────────────────────────────── */

.field--error .field__input {
    border-color: var(--danger);
}
.field--error .field__input:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-muted);
}

/* ── DISABLED STATE ──────────────────────────────────────────── */

.field--disabled .field__input {
    background: color-mix(in srgb, var(--bg-surface-sunken) 60%, transparent);
    color: var(--text-disabled);
    cursor: not-allowed;
    border-color: var(--border-subtle);
}
.field--disabled .field__label {
    color: var(--text-disabled);
}

/* ── READONLY STATE ──────────────────────────────────────────── */

.field__input:read-only:not(:disabled) {
    background: transparent;
    border-color: transparent;
    cursor: default;
}
.field__input:read-only:not(:disabled):hover {
    border-color: transparent;
}
.field__input:read-only:not(:disabled):focus {
    border-color: transparent;
    box-shadow: none;
}

/* ── ICONS ───────────────────────────────────────────────────── */

.field__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--text-tertiary);
    pointer-events: none;
}
.field__icon svg {
    width: 1em;
    height: 1em;
    font-size: var(--text-md);
}
.field__icon--left {
    left: var(--space-3);
}
.field__icon--right {
    right: var(--space-3);
}

/* Adjust input padding when icons are present */
.field--has-icon-left .field__input {
    padding-left: var(--input-icon-padding);
}
.field--has-icon-right .field__input {
    padding-right: var(--input-icon-padding);
}

/* ── HELPER TEXT ─────────────────────────────────────────────── */

.field__helper {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── ERROR TEXT ───────────────────────────────────────────────── */

.field__error {
    font-size: var(--text-xs);
    color: var(--danger);
    line-height: 1.4;
}

/* ── PASSWORD TOGGLE ─────────────────────────────────────────── */

.field__toggle {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.field__toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.field__toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}
.field__toggle:disabled {
    cursor: not-allowed;
    color: var(--text-disabled);
    pointer-events: none;
}
.field__toggle svg {
    width: 16px;
    height: 16px;
}

/* Password field with toggle needs extra right padding */
.field--password .field__input {
    padding-right: var(--input-icon-padding);
}

/* ── TEXTAREA ────────────────────────────────────────────────── */

textarea.field__input {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}
.field--sm textarea.field__input {
    padding: var(--input-padding-x-sm);
}
.field--md textarea.field__input {
    padding: var(--input-padding-x-md);
}
.field--lg textarea.field__input {
    padding: var(--input-padding-x-lg);
}