/* Keep routine field names inside their controls, like the login form. */
#routineForm .routine-floating-field {
  position: relative;
  display: block;
  min-width: 0;
}

#routineForm .routine-floating-field.hidden { display: none; }

#routineForm .routine-floating-field > label {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 14px;
  max-width: calc(100% - 54px);
  margin: 0;
  color: #5a6b82;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  cursor: text;
  transition: top 160ms ease, transform 160ms ease, font-size 160ms ease, color 160ms ease;
}

#routineForm .routine-floating-field:focus-within > label {
  color: #0866ff;
}

#routineForm .routine-floating-field > :is(input:not([type="hidden"]), select) {
  height: 58px;
  padding: 20px 14px 5px;
}

#routineForm .routine-floating-field > textarea {
  min-height: 96px;
  padding: 25px 14px 10px;
}

#routineForm .routine-floating-field .multi-picker-toggle {
  display: flex;
  align-items: flex-end;
  min-height: 58px;
  padding: 25px 40px 8px 14px;
  line-height: 19px;
}

#routineForm .routine-empty-field:has(:is(input, textarea):placeholder-shown):not(:focus-within) > label {
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 18px;
}

#routineForm .routine-empty-field:has(:is(input, textarea):placeholder-shown):not(:focus-within) > :is(input, textarea)::placeholder {
  color: transparent;
}

#routineForm .routine-empty-field:has(textarea:placeholder-shown):not(:focus-within) > label {
  top: 25px;
}

@media (prefers-reduced-motion: reduce) {
  #routineForm .routine-floating-field > label { transition: none; }
}