/* Input (Figma 385:3556) — Text / URL / Inline button × Default, Hover, Focus, Filled, Error, Disabled.
   44px control, 8px radius, 1px border (2px gold on focus), 36px inline button. */
.input{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.input__label{display:flex;gap:var(--space-4);font:var(--text-sm);color:var(--text-primary)}
.input__control{box-sizing:border-box;display:flex;align-items:center;gap:var(--space-12);height:44px;padding:0 var(--space-16);width:100%;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.input--inline .input__control{padding-right:var(--space-4)}
.input__field{flex:1;min-width:0;height:24px;border:0;background:transparent;padding:0;font:var(--text-sm);color:var(--text-primary);outline:0;text-overflow:ellipsis}
.input__field::placeholder{color:var(--text-placeholder)}
.input__icon{flex:none;width:18px;height:18px;fill:none;stroke:var(--text-secondary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.input__btn{flex:none;height:36px;padding:var(--space-8) var(--space-16);font:var(--text-xs);border-radius:var(--radius-md)}
.input__hint{margin:0;font:var(--text-xs);color:var(--text-secondary)}
.input__control:hover,.input.is-hover .input__control{border-color:var(--border-strong)}
.input__control:focus-within,.input.is-focus .input__control{border:2px solid var(--accent-default);padding:0 calc(var(--space-16) - 1px)}
.input--inline .input__control:focus-within,.input--inline.is-focus .input__control{padding:0 calc(var(--space-4) - 1px) 0 calc(var(--space-16) - 1px)}
.input.is-focus .input__icon,.input__control:focus-within .input__icon{stroke:var(--accent-hover)}
.input.is-error .input__control{border:1px solid var(--feedback-error)}
.input.is-error .input__hint{color:var(--feedback-error)}
.input.is-filled .input__icon{stroke:var(--text-primary)}
.input.is-disabled .input__label,.input.is-disabled .input__hint,.input.is-disabled .input__field{color:var(--text-muted)}
.input.is-disabled .input__field::placeholder{color:var(--text-muted)}
.input.is-disabled .input__control{background:var(--surface-background);pointer-events:none}
.input.is-disabled .input__icon{stroke:var(--text-muted)}
.input.is-disabled .input__btn{opacity:.35}
/* The control shows focus (2px gold border via :focus-within), so the inner field must not also get the global focus ring */
.input__field:focus-visible{box-shadow:none}
/* Type=Textarea (Figma 1670:76747): 112px control, 12/16 padding, text-sm, top-aligned; no resize handle (the box is fixed in the design). */
.input--area .input__control{height:112px;align-items:flex-start;padding:var(--space-12) var(--space-16)}
.input--area .input__control:focus-within,.input--area.is-focus .input__control{padding:11px calc(var(--space-16) - 1px)}
.input--area.is-error .input__control:focus-within{border:2px solid var(--feedback-error)}
.input--area .input__field{height:100%;resize:none;text-overflow:clip;font:var(--text-sm);line-height:20px}
/* Error supporting message: only while the field is in error. */
.input__error{display:none}
.input.is-error .input__error{display:block;color:var(--feedback-error)}
.input.is-error:has(.input__error) .input__hint:not(.input__error){display:none}   /* a field with its own error message shows it instead of the helper (Figma 1777:73358) */

/* State=Error filled (Figma 385:3556): the error border + message with a value in the field */
.input.is-error-filled .input__control{border:1px solid var(--feedback-error)}
.input.is-error-filled .input__error,.input.is-error-filled .input__hint{display:block;color:var(--feedback-error)}