/* input-label-in.css
   Consumers: site/preview/input-label-in.html
   Tokens: site/tokens.css (--ds-field-in-* + semantic tokens)
   States: data-attributes on .field-in
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Floating label field wrapper ────────────────────────────────────────── */

.field-in {
  position:    relative;
  background:  var(--ds-surface-0);
  border:      none;
  box-shadow:  inset 0 0 0 1px var(--ds-nba-border);
  display:     flex;
  align-items: center;
  overflow:    hidden;
  transition:  box-shadow 150ms ease, padding-top 150ms ease, padding-bottom 150ms ease;
  cursor:      text;
}

/* ── Sizes ──────────────────────────────────────────────────────────────── */

.field-in[data-size=sm] { min-height: var(--ds-field-in-sm-h); padding: var(--ds-field-in-sm-py) var(--ds-field-in-sm-px); border-radius: var(--ds-field-in-sm-r); }
.field-in[data-size=md] { min-height: var(--ds-field-in-md-h); padding: var(--ds-field-in-md-py) var(--ds-field-in-md-px); border-radius: var(--ds-field-in-md-r); }
.field-in[data-size=lg] { min-height: var(--ds-field-in-lg-h); padding: var(--ds-field-in-lg-py) var(--ds-field-in-lg-px); border-radius: var(--ds-field-in-lg-r); }
.field-in[data-size=xl] { min-height: var(--ds-field-in-xl-h); padding: var(--ds-field-in-xl-py) var(--ds-field-in-xl-px); border-radius: var(--ds-field-in-xl-r); }

/* py-filled: сжимаем padding когда лейбл всплыл */
.field-in[data-size=sm][data-filled], .field-in[data-size=sm]:focus-within { padding-top: var(--ds-field-in-sm-py-filled); padding-bottom: var(--ds-field-in-sm-py-filled); }
.field-in[data-size=md][data-filled], .field-in[data-size=md]:focus-within { padding-top: var(--ds-field-in-md-py-filled); padding-bottom: var(--ds-field-in-md-py-filled); }
.field-in[data-size=lg][data-filled], .field-in[data-size=lg]:focus-within { padding-top: var(--ds-field-in-lg-py-filled); padding-bottom: var(--ds-field-in-lg-py-filled); }
.field-in[data-size=xl][data-filled], .field-in[data-size=xl]:focus-within { padding-top: var(--ds-field-in-xl-py-filled); padding-bottom: var(--ds-field-in-xl-py-filled); }

/* ── Inner content area ──────────────────────────────────────────────────── */

.field-in .inner { flex: 1; position: relative; }

/* ── Floating label ─────────────────────────────────────────────────────── */

.field-in[data-size=sm] label,
.field-in[data-size=md] label {
  position:       absolute;
  top:            50%;
  left:           0;
  transform:      translateY(-50%);
  color:          var(--ds-text-tertiary);
  pointer-events: none;
  transition:     all 150ms;
  font-size:      var(--ds-field-in-sm-label-fs);
  line-height:    var(--ds-field-in-sm-label-lh);
}
.field-in[data-size=lg] label,
.field-in[data-size=xl] label {
  position:       absolute;
  top:            50%;
  left:           0;
  transform:      translateY(-50%);
  color:          var(--ds-text-tertiary);
  pointer-events: none;
  transition:     all 150ms;
  font-size:      var(--ds-field-in-lg-label-fs);
  line-height:    var(--ds-field-in-lg-label-lh);
}

.field-in[data-size=sm][data-filled] label, .field-in[data-size=sm]:focus-within label { top: 0; transform: none; font-size: var(--ds-field-in-sm-label-float-fs); line-height: var(--ds-field-in-sm-label-float-lh); }
.field-in[data-size=md][data-filled] label, .field-in[data-size=md]:focus-within label { top: 0; transform: none; font-size: var(--ds-field-in-md-label-float-fs); line-height: var(--ds-field-in-md-label-float-lh); }
.field-in[data-size=lg][data-filled] label, .field-in[data-size=lg]:focus-within label { top: 0; transform: none; font-size: var(--ds-field-in-lg-label-float-fs); line-height: var(--ds-field-in-lg-label-float-lh); }
.field-in[data-size=xl][data-filled] label, .field-in[data-size=xl]:focus-within label { top: 0; transform: none; font-size: var(--ds-field-in-xl-label-float-fs); line-height: var(--ds-field-in-xl-label-float-lh); }

/* ── Input element ──────────────────────────────────────────────────────── */

.field-in[data-size=sm] input,
.field-in[data-size=md] input { border: none; outline: none; background: transparent; width: 100%; font-size: var(--ds-field-in-sm-fs); line-height: var(--ds-field-in-sm-lh); color: var(--ds-text-primary); transition: padding-top 150ms ease; }
.field-in[data-size=lg] input,
.field-in[data-size=xl] input { border: none; outline: none; background: transparent; width: 100%; font-size: var(--ds-field-in-lg-fs); line-height: var(--ds-field-in-lg-lh); color: var(--ds-text-primary); transition: padding-top 150ms ease; }

/* Rest state: label is centered — hide native placeholder to prevent overlap */
.field-in:not([data-filled]):not(:focus-within) input::placeholder { color: transparent; }

.field-in[data-size=sm][data-filled] input, .field-in[data-size=sm]:focus-within input { padding-top: calc(var(--ds-field-in-sm-label-float-lh) + var(--ds-field-in-sm-gap)); }
.field-in[data-size=md][data-filled] input, .field-in[data-size=md]:focus-within input { padding-top: calc(var(--ds-field-in-md-label-float-lh) + var(--ds-field-in-md-gap)); }
.field-in[data-size=lg][data-filled] input, .field-in[data-size=lg]:focus-within input { padding-top: calc(var(--ds-field-in-lg-label-float-lh) + var(--ds-field-in-lg-gap)); }
.field-in[data-size=xl][data-filled] input, .field-in[data-size=xl]:focus-within input { padding-top: calc(var(--ds-field-in-xl-label-float-lh) + var(--ds-field-in-xl-gap)); }

/* ── Hover / Focus ──────────────────────────────────────────────────────── */

.field-in:hover:not([data-disabled]):not([data-readonly]):not([data-error]):not([data-success]):not([data-warning]) {
  box-shadow: inset 0 0 0 1px var(--ds-stroke-neutral-hover);
}
.field-in:focus-within:not([data-disabled]):not([data-readonly]) {
  box-shadow: inset 0 0 0 2px var(--ds-stroke-high);
}

/* ══════════════════════════════════════════════════════════════════════════
   VALIDATION INTENTS
   ════════════════════════════════════════════════════════════════════════ */

.field-in[data-error]        { box-shadow: inset 0 0 0 1px var(--ds-neg-default); }
.field-in[data-error]:hover  { box-shadow: inset 0 0 0 1px var(--ds-neg-default); }
.field-in[data-error]:focus-within { box-shadow: inset 0 0 0 2px var(--ds-neg-default); }

.field-in[data-success]        { box-shadow: inset 0 0 0 1px var(--ds-pos-default); }
.field-in[data-success]:hover  { box-shadow: inset 0 0 0 1px var(--ds-pos-default); }
.field-in[data-success]:focus-within { box-shadow: inset 0 0 0 2px var(--ds-pos-default); }

.field-in[data-warning]        { box-shadow: inset 0 0 0 1px var(--ds-warn-700); }
.field-in[data-warning]:hover  { box-shadow: inset 0 0 0 1px var(--ds-warn-700); }
.field-in[data-warning]:focus-within { box-shadow: inset 0 0 0 2px var(--ds-warn-700); }

/* ── Disabled ────────────────────────────────────────────────────────────── */

.field-in[data-disabled] {
  background:     var(--ds-nba-15);
  box-shadow:     inset 0 0 0 1px var(--ds-nba-border-disabled);
  pointer-events: none;
}
.field-in[data-disabled] input,
.field-in[data-disabled] label { color: var(--ds-disabled-text); }

/* ── Caption row ────────────────────────────────────────────────────────── */

.caption-row {
  display:         flex;
  justify-content: space-between;
  margin-top:      6px;
  font-size:       var(--ds-field-caption-fs);
  line-height:     var(--ds-field-caption-lh);
  color:           var(--ds-text-tertiary);
}
.caption-row .error-text   { color: var(--ds-neg-default); }
.caption-row .success-text { color: var(--ds-pos-default); }
.caption-row .warning-text { color: var(--ds-warn-700); }

[data-theme="dark"] .caption-row .error-text,
.theme-invert .caption-row .error-text   { color: var(--ds-neg-500); }
[data-theme="dark"] .caption-row .success-text,
.theme-invert .caption-row .success-text { color: var(--ds-pos-500); }

/* Dark / LI: floating label in validation uses lighter APCA tokens */
[data-theme="dark"] .field-in[data-error] label,
.theme-invert .field-in[data-error] label   { color: var(--ds-neg-500); }
[data-theme="dark"] .field-in[data-success] label,
.theme-invert .field-in[data-success] label { color: var(--ds-pos-500); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .caption-row .error-text   { color: var(--ds-neg-500); }
  :root:not([data-theme="light"]) .caption-row .success-text { color: var(--ds-pos-500); }
  :root:not([data-theme="light"]) .field-in[data-error] label   { color: var(--ds-neg-500); }
  :root:not([data-theme="light"]) .field-in[data-success] label { color: var(--ds-pos-500); }
}

/* ── State Explorer panel ──────────────────────────────────────────────── */

.se-panel {
  background:    var(--ds-surface-0);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding:       24px;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .field-in, .field-in label, .field-in input { transition-duration: 0.01ms !important; }
}