/* CUITextField - mirrors cui_text_field.dart. State is derived: focus (:focus-within/.is-focused), error (.has-error), disabled (.is-disabled).
   Precedence: disabled > error > focused. 200ms ease-out on every transition; shake on error entrance. */
.cui-text-field { -webkit-font-smoothing: auto;
  --_bg: var(--cui-color-surface-bg-default); --_border: var(--cui-color-border-default); --_bw: var(--cui-border-hairline);
  --_label: var(--cui-color-text-default); --_text: var(--cui-color-text-default); --_hint: var(--cui-color-text-muted);
  --_helper: var(--cui-color-text-muted); --_glow: transparent;
  --_min-h: 56px; --_dur: calc(200ms / var(--cui-speed, 1)); --_ease: ease-out;
  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0;
}
:root[data-app="device"] .cui-text-field { --_min-h: 102px; }

.cui-text-field__label { display: block; margin: 0 0 var(--cui-space-2xs);
  font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size); font-weight: var(--cui-type-body-md-semi-weight);
  letter-spacing: var(--cui-type-body-md-semi-spacing); line-height: round(nearest, var(--cui-type-body-md-semi-line), 1px);
  color: var(--_label); transition: color var(--_dur) var(--_ease); }

.cui-text-field__box { position: relative; box-sizing: border-box; display: flex; align-items: center; min-height: var(--_min-h);
  padding: 0 calc(var(--cui-space-md) + var(--_bw)); /* Flutter's decoration border insets the content */ background: var(--_bg); border-radius: var(--cui-radius-pill);
  /* Flutter draws the border inside the box: inset ring, not CSS border */
  box-shadow: inset 0 0 0 var(--_bw) var(--_border), 0 0 8px var(--_glow);
  transition: background-color var(--_dur) var(--_ease), box-shadow var(--_dur) var(--_ease), padding var(--_dur) var(--_ease); }

.cui-text-field__input { appearance: none; border: 0; outline: 0; background: transparent; margin: 0; padding: 0; width: 100%; min-width: 0;
  font-family: var(--cui-type-body-md-family); font-size: var(--cui-type-body-md-size); font-weight: var(--cui-type-body-md-weight);
  letter-spacing: var(--cui-type-body-md-spacing); line-height: round(nearest, var(--cui-type-body-md-line), 1px);
  color: var(--_text); caret-color: var(--cui-color-surface-bg-brand); transition: color var(--_dur) var(--_ease); }
.cui-text-field__input::selection { background: color-mix(in srgb, var(--cui-color-surface-bg-accent) 40%, transparent); }

/* hint stays mounted and fades on first keystroke */
.cui-text-field__hint { position: absolute; left: calc(var(--cui-space-md) + var(--_bw)); right: calc(var(--cui-space-md) + var(--_bw)); pointer-events: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--cui-type-body-md-family); font-size: var(--cui-type-body-md-size); font-weight: var(--cui-type-body-md-weight);
  letter-spacing: var(--cui-type-body-md-spacing); line-height: round(nearest, var(--cui-type-body-md-line), 1px);
  color: var(--_hint); opacity: 1; transition: opacity var(--_dur) var(--_ease), color var(--_dur) var(--_ease); }
.cui-text-field__input:not(:placeholder-shown) ~ .cui-text-field__hint { opacity: 0; }

.cui-text-field__caption { margin: 0; overflow: hidden; animation: cui-text-field-caption var(--_dur) var(--_ease);
  font-family: var(--cui-type-caption-family); font-size: var(--cui-type-caption-size); font-weight: var(--cui-type-caption-weight);
  letter-spacing: var(--cui-type-caption-spacing); line-height: round(nearest, var(--cui-type-caption-line), 1px);
  color: var(--_helper); transition: color var(--_dur) var(--_ease); }
.cui-text-field__caption:not(:empty) { padding-top: var(--cui-space-2xs); }
@keyframes cui-text-field-caption { from { opacity: 0; } to { opacity: 1; } }

/* focused */
.cui-text-field:focus-within, .cui-text-field.is-focused {
  --_bg: var(--cui-color-surface-bg-brand-subtle); --_border: var(--cui-color-surface-bg-accent); --_bw: var(--cui-border-default);
  --_glow: color-mix(in srgb, var(--cui-color-surface-bg-accent) 25%, transparent); }
/* error (wins over focus) */
.cui-text-field.has-error, .cui-text-field.is-error, .cui-text-field.has-error:focus-within {
  --_bg: var(--cui-color-surface-bg-danger-subtle); --_border: var(--cui-color-surface-bg-danger); --_bw: var(--cui-border-default);
  --_label: var(--cui-color-text-danger); --_helper: var(--cui-color-text-danger); --_glow: transparent; }
.cui-text-field.has-error .cui-text-field__box, .cui-text-field.is-error .cui-text-field__box { animation: cui-text-field-shake calc(350ms / var(--cui-speed, 1)) linear; }
/* decaying sine, 3 cycles, 4px */
@keyframes cui-text-field-shake {
  0% { transform: translateX(0); } 4.2% { transform: translateX(3.6px); } 12.5% { transform: translateX(-3px); }
  20.8% { transform: translateX(2.5px); } 29.2% { transform: translateX(-2px); } 37.5% { transform: translateX(1.5px); }
  45.8% { transform: translateX(-1.2px); } 54.2% { transform: translateX(.9px); } 62.5% { transform: translateX(-.6px); }
  70.8% { transform: translateX(.4px); } 79.2% { transform: translateX(-.25px); } 87.5% { transform: translateX(.1px); } 100% { transform: translateX(0); } }
/* disabled (wins over all) */
.cui-text-field.is-disabled, .cui-text-field.is-disabled:focus-within {
  --_bg: var(--cui-color-surface-bg-disabled); --_border: var(--cui-color-border-default); --_bw: var(--cui-border-hairline);
  --_label: var(--cui-color-text-disabled); --_text: var(--cui-color-text-disabled); --_hint: var(--cui-color-text-disabled); --_glow: transparent; }
.cui-text-field.is-disabled .cui-text-field__input { cursor: default; }
@media (prefers-reduced-motion: reduce) { .cui-text-field.has-error .cui-text-field__box, .cui-text-field.is-error .cui-text-field__box { animation: none; } }

/* Flutter centres the text line in the box with an even leading split; on companion that lands half a pixel lower than CSS centring. */
.cui-text-field__input, .cui-text-field__hint { transform: translateY(.5px); }
:root[data-app="device"] .cui-text-field__input, :root[data-app="device"] .cui-text-field__hint { transform: none; }
